Questions tagged [html-canvas]

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

43 questions with no upvoted or accepted answers
Filter by
Sorted by
Tagged with
4
votes
1answer
571 views

HTML5 Canvas - Drawing with Floats

I'm trying to implement a game where you have car moving along a line in HTML5 Canvas. Using a little bit of trigonometrie I managed to get the right x and y coordinates to add to the coordinates of ...
4
votes
1answer
269 views

Updating code to include states

The Problem I am having a problem in that I am finding it hard to understand how to update my current code so that it uses states. I am creating a game, the game has a menu, each page in the game ...
3
votes
0answers
125 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 ...
3
votes
0answers
235 views

Check if a point is touching a user drawn curve in HTML5 canvas

I am having trouble detecting whether a ball is colliding with a red curve. The curve below is an example of what a user may draw on to the canvas. I can't think of any fast ways to detect collision ...
3
votes
0answers
558 views

Drawing a hexgrid on a canvas, yet making it zoom/scrollable?

I'm developing a game in JS / PHP. The game is basically a 2D plane (hexgrid) where each hex represents a location in space. In total, I'm drawing 25 * 25 hexes on a 1000x1000 canvas. I also draw ...
2
votes
2answers
170 views

My HTML canvas keep flickering

I'm trying to create a game in HTML canvas, but somehow it keeps flickering, I've taken a look at the tutorial and I perceived that my code is more or less similar. Can anybody help me fix this? <...
2
votes
0answers
433 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 ...
2
votes
0answers
58 views

CocoonJS draws shadow around tiles

I am using CocoonJS launcher on iOS for a simple tiled game. Calling canvas drawImage for tiles adds a shadow or ghost border around tiles. See this screenshot: http://martindrapeau.github.io/cocoon-...
2
votes
0answers
1k views

Converting coordinate systems to/from an isometric game world

I have tried searching and reading for an answer, but the information I could dig up either didn't fit what I need or was in the form akin to "Just multiply the vectors with the inverse matrix of.." ...
1
vote
0answers
45 views

Problem with collisions detection on canvas platformer

Having a lot of trouble with my collision detection in my platformer. If you go straight to the right the block will float. Also the corners let the block sink right through and the walls are sticky. ...
1
vote
2answers
80 views

Select Neighboring X or Y Tiles

I have a randomly generated set of tiles, and I am trying to select neighboring x or y tiles to perform functions on them based on if they are a certain value of tile, like so: ...
1
vote
1answer
454 views

How to rotate player to face mouse on canvas?

I'm building a basic game using plain javascript and I am trying to rotate my object to follow my mouse. I've tried getting the client's mouse X and Y then subtracting the canvas width and height ...
1
vote
0answers
92 views

Junk movement with steady 60fps on Web canvas

I'm new to building games on canvas, and I'm trying to create one. But I encountered a problem with sprite movements. My sprites move is smooth, but sometimes it starts to "jump". FPS is stable 60 ...
1
vote
0answers
206 views

Converting 2d cartesian coordinate-based map editor to rendering isometric view

I have been working on a 2d html5 canvas map editor. It is tile based, and originally it was just a top-down view on a grid of tiles (or empty spaces). I decided I wanted to convert it to render the ...
1
vote
0answers
145 views

Performance problems with scrolling html5 canvas for large tile-based game

I try programming a splix.io clone as an electron app and do the visualization via the html5 canvas. The movement across the tiles should look fluent like the original, so I target 60 frames a second. ...
1
vote
0answers
41 views

How to fix html canvas sprite trail when moving to the right side

I have moving background on character movemet. When I move to the sides, I get stacked images, so I found out that I need to clearRect every time to avoid this. But clearing canvas leaves me with ...
1
vote
0answers
13 views

How do I fix these touch events? Events respond if there are 2 fingers but not 1

I am making a simple game of mine mobile-friendly. The goal is to: Make character walk if a touchstart event is sensed on right half of screen. Stop character if a touchend event is sensed on the ...
1
vote
0answers
55 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
419 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 ...
1
vote
0answers
821 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 ...
1
vote
0answers
1k views

Detecting collision of multiple moving objects

I have wrote a simple game that has a 100 balls bouncing off the borders of the canvas. Each ball is an instance of ball class function that has the following ...
1
vote
0answers
462 views

Using canvas graphics instead of traditional sprites in phaser

I'm trying to learn Phaser (total beginner with mild JS experience) and I'm following tutorials and such where everything is using sprites. I'm trying to get by with basic canvas shapes instead of ...
1
vote
0answers
172 views

Facebook Canvas (web) Game for Desktop & Mobile Browsers

as the title suggests - I am about to develop a game for FB canvas. Will the game support mobile and desktop or do I have to create two different project/game setups for this? thanks
1
vote
0answers
269 views

Donut-shaped / inverse mask in Phaser

I am trying to get a donut-shaped mask in Phaser (essentially the inverse of a regular mask). The mask shape is dynamic so it needs to be a Phaser.Graphics polygon object. Desired result: The blue ...
1
vote
0answers
94 views
1
vote
0answers
61 views

Improving performance on older Androids

I'm learning to build html5 games for mobile. I'm worried about the FPS animation on older model Android... as I use a lot of setTimeouts to update certain aspects ...
1
vote
0answers
815 views

Drawing two orthogonal strings in 3d space in Android Canvas?

I want to draw two strings in canvas. The first string must be rotated around the Y axis, for example 45 degrees. The second string must start at the end of the first string and also it must be ...
0
votes
1answer
24 views

I can't clear the paint image in my Canvas

I'm trying to make the Mario move, but somehow it leaves traces behind, can anybody help??? ...
0
votes
1answer
37 views

how to join the body of snake in 2D snake game

i'm making a snake game in javaScript from scratch. The problem is that the snake looks disjoint(see image). How can I connect the body(rectangles) of the snake? here is the code of drawing snake: <...
0
votes
0answers
62 views

html5 canvas isometric tile map

i need a help i have an Isometric Staggered tile map in Tiled (mapeditor.org). 100x100 tiles, 94x54px, 9447x2727px. total. How can i make this in html5 canvas ? var context = document....
0
votes
1answer
58 views

I'm trying to work with setInterval inside a loop and it doesn't work the i want it to

I am making a 2d canvas game in Javascript. I am trying to make the enemies that are coming to my hero to shoot a bullet every 3 seconds. ...
0
votes
0answers
65 views

Using dom elements for game interaction - slow performance

I have a need for my html5 game (using melonjs) to allow users to click tile areas on the map. The idea is it will show a css styled hover area. The browser tested is chrome. I could do this natively ...
0
votes
1answer
74 views

Why my canvas isn't showing anything after I put code in the loop for tile map?

My canvas stop showing anything when I want to display a tile 25 times. No errors. Here is the code: ...
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
359 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
0answers
32 views

Reverting 2d canvas?

I'm making a multiplayer game which involves drawing lines. It's based this game: http://curvefever.com/sites/default/files/resize/remote/ef86488088c618df13b34f8b87aafd4e-1107x808.jpg. The game is ...
0
votes
0answers
270 views

Drawing a object with Box2D and HTML5 canvas on current mouse position

I'm attempting to create a air hockey type game with HTML5 canvas and JavaScript, using Box2dWeb for the physics calculation. I need a way to draw the puck at the current mouse x and y position every ...
0
votes
0answers
133 views

What would be a good way to scroll a large html canvas (that contains little repetition if any)

What would be a good way to scroll the content of a huge html5 canvas so that the scroll is crisp and smooth, and memory consumption (and cpu load or battery consumption) is also reasonable? any ...
0
votes
1answer
268 views

Canvas HTML5 Top View -> Isometric

We are working in a simple MP strategy game using Node, Express and Sockets! I'm wondering if there's an easy approach to a transformation to make a Top View game into a 3D Isometric, without adding a ...
0
votes
1answer
448 views

Should I render all of my HUD views to a single SurfaceView?

I'm using a SurfaceView and canvas to implement a game HUD, title screens etc., by overlaying standard Android view widgets over my ...
-1
votes
2answers
60 views

I need help with calculating the angle my character is aiming at

So im doing this program where i want my hero to shoot to the direction its facing , but for this job to get done i need to calculate the angle my hero is facing with Math.atan2() , atleasts thats ...
-1
votes
1answer
560 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
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. ...