Questions tagged [html-canvas]

A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.

Filter by
Sorted by
Tagged with
0
votes
1answer
425 views

How does the double-buffered canvas know when to swap the buffer?

How does the HTML5 canvas know that all the drawing operations are complete and it's time to swap the buffer ? Program can have multiple draw calls at different places so how will it know when is the ...
0
votes
3answers
5k views

JavaScript canvas remove image

I'm writing a platformer and I want to implement own art, now I know how to display it and this isn't my question. It rather is how do I remove it? I tried drawing a rectangle over it and removing it, ...
3
votes
1answer
484 views

Lighting in 2d isometric games

I want to add lighting to an isometric game that I'm working on. The closest I've come so far is to do a pass over the blocks on the floor and build up a light intensity matrix (based on how far each ...
0
votes
1answer
279 views

Mobile screen resolution and canvas size

I'm making a HTML5 game using the canvas. I was building it for my iPhone 6 which state a resolution of 1334x750 pixels but also a resolution of 667x375 points. I notice that my canvas need to match ...
0
votes
1answer
61 views

DOM for GUI - display animated objects

I'm creating an HTML5 game using Canvas, but want to use DOM for the GUI for the reasons mentioned in there articles: http://blog.sklambert.com/html5-game-tutorial-game-ui-canvas-vs-dom/ http://www....
0
votes
1answer
506 views

HTML5 Canvas non-geometric edge trace for collision detection

I had a question about how to do edge tracing for use in collision detection for a game - think 'Asteroids'. I couldn't frame the question clearly so I did some R&D. The question I had in mind was ...
2
votes
0answers
367 views

Persistent realtime game authentication (JWT, Passport)

Context I am building a MMO game in HTML5 with canvas. I use NodeJS on server & JS from scratch on client. I also use socket.io to manage realtime. The game is persistent & each player keep ...
3
votes
1answer
340 views

DrawImage problem adjacent sprite?

Context I'm building a 2D game from scratch in JS. I'm drawing the map by using rpgmxp tilesets for the moment just to have some resources : Each tile is 32*32 pixels. I'm using canvas API with <...
0
votes
2answers
53 views

Limiting Framerate and Input

So I have been learning HTML5 canvas recently and ran into a bit of a snag. I created a proof of concept that builds a block based 2d map that you can move a character inside of using arrow keys. This ...
0
votes
1answer
142 views

Most efficient way to detect and act upon collision (Specific for my 2d game)

Currently, mainly just for fun, I'm working on a 2d game where I have all collide-able blocks (background) assorted into an array when its loading, along with the player put into a different part of ...
1
vote
0answers
53 views

Implementing navigatable achievement menu in javascript

I am in the process of learning javascript for game design, and wanted to make a separate achievement page that the user can navigate to that will allow them to check their achievements on various ...
1
vote
0answers
336 views

How to flip sprites with different dimensions horizontally?

I am trying to make an animation on HTML5 Canvas with this texture atlas, which was packed by TexturePacker: and it works good when the Character is facing right. I try to flip it horizontally, but ...
0
votes
1answer
142 views

A logic error. canvas: balls physics, bounce

Hi I was making a program that simulate a bunch of balls bouncing, but the problem is some balls got stuck to the floor. Since it's a logic error, it is kind of difficult to find. Can someone help, I ...
1
vote
1answer
3k views

Clearing just the object, not the whole canvas, leaving an uwanted trail

I'm working on a platform game via poo. I heard is more efficient to clear just the object you're drawing instead of clearing the whole canvas. So I'm working on this, and all goes well when the ...
3
votes
0answers
122 views

Optimising my Node.js/Js/Socket shooter game

So here I made a little shooter game just to play around with and on my pc it runs fine but for people with worse internet/less powerful computers (e.g at school/few friends of mine) it is quite laggy ...
0
votes
1answer
17 views

How to make the image move forward properly when rotated in my HTML5 game?

I am just trying to make a simple 2D racing game using canvas. It uses the W,S,A, D keys to move the car. The W key should take me forward and the A and D keys will turn each way. I want the car to ...
1
vote
1answer
74 views

Checking if bullet collides with enemy when I know the start X & Y, the angle, the speed and dist traveled of the bullets

This is the bullet I create when a player clicks to attack ...
1
vote
1answer
156 views

How to automate the game

I am new to game development and I have a game where the car moves and picks the monster.But now I want to automate the game so it looks like it is played automatically. The control keys are given by ...
1
vote
1answer
207 views

How to blend the surface with HTML5 canvas?

I can simply blend the surface in GameMaker using these codes: ...
0
votes
1answer
32 views

How to change the color of an image when getting points

Currently I have a car game which I give points when a car touches the monster.Now extra to that I also wanted to change the color of the car or replace the car image with a different color car image ...
0
votes
1answer
111 views

How to turn the car when pressing left or right key

I am new to canvas and developing a game where a car moves straight and now I want to turn the car to anti clockwise when the left key is pressed and clockwise when right key is pressed. Currently I ...
1
vote
1answer
477 views

Throw ball - distance and force

I have a question, I need a formula to calculate the distance and a force based on the speed that drags the finger up on the phone. And is there any way I can get a look? And also shows the trajectory ...
1
vote
2answers
207 views

Keep balls in the box and prevent intersection

I'm coding a one-dimentional elastic collision animation (demo) with balls. I've used fixed position values when testing and now I want to use random values. The problem with random values is that ...
0
votes
0answers
66 views

Choosing a data structure for a group of static (almost) thousands of objects on HTML5 canvas

I have this requirement to implement a data structure for a group of thousands of displayable objects, on HTML5 canvas. Something like a particle system. The objects are randomly spread on the map. ...
0
votes
0answers
340 views

Adding multiple animated sprites on canvas make the game FPS drop sharply

I am using PIXI.js to build a html5 canvas game. Although this is PIXI.js specific question I think this may happen very often in HTML5 canvas games. I have placed hundreds of static sprites in my ...
0
votes
1answer
4k views

How can I scale/zoom to a point in canvas in the game?

I am using html5 canvas to build a MMO game. When I scale my background by default it scales to (0, 0) which is the top left corner of the background. If I have ...
1
vote
3answers
389 views

Is it alright to have hundreds of canvas object on screen?

I am using html5 to build a game and it is based on Canvas not webGL. I am trying to build sprites from canvas object not from images. Because there will be many sprites on the screen and each of them ...
1
vote
2answers
4k views

javascript game camera that follows my player

I am experimenting with game developement here but my player disapears my player is alowed to just walk of the screen and never be seen again so i was wondering if someone could help me with adding a ...
1
vote
2answers
283 views

How can I increase framerate, when drawing tiles to a HTML canvas?

I am using the HTML 5 canvas to make a simple platformer game. I am currently drawing the tiles using a for loop that runs through a list of tiles and checks if ...
1
vote
1answer
790 views

Javascript game engine that can work 'seamlessly' with react-native [closed]

I have experience with Unity, but I don't like the fact that Unity compiles your game directly into APK (or IOS equivalent). I want to modify the game to provide chat interface for multiplayer mode ...
1
vote
1answer
65 views

Rotated canvas sprite not drawing properly

First, sorry for my english. Said that: Recently I began to study JavaScript and like a way to consolidate what I learned I decided to make a simple video game with canvas and javascript: kind of ...
-1
votes
1answer
446 views

How to connect circle nodes using arrows?

I'm trying to design a simple game where a series of numbered circles can be connected by arrows (like mobile phone pattern locks). I have these circles designed here: https://jsfiddle.net/sarmadm/...
1
vote
1answer
751 views

Camera movement, Draw grid

If I have a 20x10 grid (640x320) where tiles are 32x32 The grid are rendered: ...
0
votes
1answer
188 views

Perlin noise terrain issue when scrolling

I am generating a terrain in Javascript canvas using this js project for the Perlin noise. I have an array of points, and when one point leaves the left-hand-side of the window, it is removed, and a ...
2
votes
1answer
1k views

2d Tile Movement and Camera

Let's imagine we have a 60x60 grid (where a Tile is 64x64px). Within the viewport there should be 10 tiles. The player object is 32x32px. To have smooth movement, I have to take delta time in ...
0
votes
3answers
620 views

How to make space invaders destructible scenery and conform it to a shape?

We all like the bases that can be destroyed by chunks being split out, I originally implemented it by making a rectangle filled with individual squares (2x2 pixel size CANVAS rects) that would ...
0
votes
2answers
2k views

How to draw an image on canvas without html

I'm trying to add a sprite to the canvas of my game. However, I don't want to use an image tag. However, I haven't found a way to do this no matter how hard I searched. Something like: ...
0
votes
1answer
164 views

Character movement resetting x & y position in HTML5 game

I have an HTML5 game I'm working on and I'm at the point where I'm trying to make the character move. For the most part, the character(A rectangular square) is moving, but it's not moving from its ...
1
vote
0answers
798 views

Creating an Isometric tile map with HTML5

I'm trying to create an isometric tile map using HTML5 Canvas. Everything I've found online points me towards using a pre-built engine. I'd like to learn how to do this without using an engine. Is ...
2
votes
1answer
369 views

Infinite space 2d map - how to implement in js

Im not exactly sure how to implement this in JS. So I want to have a 2d infinite map, but not tiled. The coordinates are there only so that if you are travelling around space you know in what ...
0
votes
1answer
72 views

Line rect intersection - lines behave like rays

Why is this? I have a simple ship that is a 14x14 rectangle, and a contour map. I want to be able to determine when the ship hits the ground. Here's a link to the JSFiddle. Here's what happens now: ...
0
votes
1answer
90 views

Line rect intersection

I've been reading Timothy Wright's "Fundamental 2D Game Programming With Java". I'm trying to apply its principles to a Lunar Lander game - it's a JSFiddle for now, and can be found here. The problem ...
0
votes
1answer
668 views

JavaScript - Updating a canvas real-time… from server-side or client-side

I have this 2D tilemap game 13x13 viewport (169 tiles drawn on canvas at a time) of a 150x150 map. Each tile is 32x32px. Obviously I only update the 13x13 viewport... I want to update a canvas in ...
1
vote
2answers
750 views

HTML canvas, Node WebSocket and multiplayer game like slither.io. How to send visual data over websockets?

Where to start creating a multiplayer game like slither.io, agar.io, etc. I need only learn how to draw live positions and other data of all players into one fullscreen HTML5 canvas with update ...
0
votes
1answer
362 views

How do I make an HTML5 canvas tiled map with tiles which have other than squared edges?

I'm creating an HTML canvas map and I'm trying to have the edges of the tiles not appear square, as in the tiles merge in to each other. I've scoured the internet for hours but can't seem to find ...
0
votes
1answer
413 views

2d animation on html5 canvas using a vector and speed

Im moving a starship from one location to the other. In creating a vector, normalize and magnitude it. Lets assume my vector looks like this ...
-1
votes
1answer
1k views

How to detect collisions of objects in two different arrays?(html canvas)

I am making a canvas game where you shoot at an endless amount of enemies. My problem is that the I am not sure how to make the objects from the bullets array collide with those of the enemy array. ...
-1
votes
2answers
94 views

Center of Image whose height, width and position are known

I have been struggling to find the center of an image(rectangle). I have following data with me: width: w, height: h, position: (x,y) My image is an object on ...
3
votes
2answers
1k views

Javascript canvas rotating single sprite instead of entire context

I am trying to recreate asteroids, but I need the ship to rotate based on user input. I have w,a,s,d keys set to change the [pos] of the ship by 1 in the corresponding direction, but now, I need to ...
1
vote
2answers
560 views

Object have the same “speed” all time JavaScript

I try to create a 2D game with a big map and multiple objects. The player is always in the middle of the screen and all the other objects is moving around so it feels like a big map. I want the ...