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

learn more… | top users | synonyms

1
vote
1answer
550 views

Building a simple bomberman game with Node.js and Socket.io [closed]

I'm building this game mostly because I want to experiment with Node.js and Socket.io, and the game is more like a proof of concept. To start with, I have a 2D grid system as the game map. ...
0
votes
1answer
56 views

What determines the hit detection ordering for graphic elements in Unity (2d game)?

I have a bunch of overlapping buttons spread across several UI Canvases. The default mouse behaviour only registers hover/click events with one of the overlapping buttons, which is ideal for my ...
2
votes
3answers
2k views

HTML5 clicking objects in canvas

I have a function in my JS that gets the user's mouse click on the canvas. Now lets say I have a random shape on my canvas (really its a PNG image which is rectangular) but i don't want to include ...
0
votes
2answers
683 views

Tile Map Coordinates

I am have now this code: http://jsfiddle.net/DK67k/2/ In here is 2D tile map and when you click on tile you get coordinates on alert. But for get precises coordinate you need click on top left tile(...
0
votes
2answers
321 views

“Painting” elements in html5 canvas

I'm making a game in coffeescript (although for the sake of this problem that's probably not all that relevant) and html5's canvas. It's a game that involves a paint cannon, that fires circular ...
0
votes
0answers
25 views

Performance slows down on click event

I'm currently working on a game in node using socket.io and drawing onto canvas. I'm noticing that when I click during the game, character movement slows to a crawl. For context: I'm updating x,y ...
2
votes
0answers
89 views

tilting image for mode7 game in HTML5

I'm making a mode7 game like mario-kart and I need to tilt the image before I draw it, I have tried using a buffer canvas to tilt the image then draw it on the games canvas but this makes it laggy (...
0
votes
2answers
12k views

How To Scale Canvas In Android

I am writing a android game using Canvas as the way to draw everything, the problem is that when i run it on different android phones the canvas dosn't change size i tried using canvas.scale() but ...
1
vote
3answers
2k views

Why does a UI button that is child to a canvas not appear in game view?

I am trying to place a button onto a canvas background using C# script. I want the button specific to the canvas (i.e., if I move the camera to look at another canvas, I do not want the button ...
6
votes
4answers
5k views

2D Collision in Canvas - Balls Overlapping When Velocity is High

I am doing a simple experiment in canvas using Javascript in which some balls will be thrown on the screen with some initial velocity and then they will bounce on colliding with each other or with the ...
2
votes
1answer
676 views

JS Canvas - Creating 2D Game lighting effect like Terraria

I just started working with canvas in HTML5 and with javascript. I'm pretty satisfied with my game so far: http://xenopal.dk/game-v1.1/. But I'd like to implement lighting as well in the style of ...
5
votes
3answers
561 views

How to do a genetic algorithm's chromosome which controls movements

First I would like to inform you that I'm french and 15 so my english is not very good. I've read some articles about genetic algorithms (GA) and since I discovered the HTML5's canvas element, I can ...
3
votes
1answer
212 views

Creating HTML5 Canvas Objects in Javascript [closed]

I'm currently trying to learn how to make HTML5 Canvas games with JavaScript. I would like to use object oriented JavaScript to manage the elements of the game, but i'm having trouble. I've done a lot ...
-2
votes
1answer
58 views

How do I clear the previous frames of a canvas animation?

I am trying to rotate an object, but all the previous frames still show up on the canvas. Here is my code. This didn't work: this.ctx.clearRect(0, 0, this.canvas.canvasWidth, this.canvascanvas....
0
votes
1answer
82 views

android canvas rope swing

I'm creating the code, where a player swinging on a rope for the moment I got this double angle = Math.atan2(player_y - center_y, player_x - center_x) - Math.atan2(end_y - center_y, end_x - center_x)...
1
vote
0answers
38 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 ...
0
votes
1answer
774 views

Creating looping canvas animation (slot machine with reels)

I have a small assignment to create something like slot machine with spinning pictures. I have to use HTML5 Canvas. I would like to hear some opinions how this can be made simply and performantly. ...
3
votes
1answer
7k views

HTML5 - Dynamic canvas grid for scrolling a big map

I've been working on different scrolling algorithms for my JS-based game. My main problem is that I need to draw a huge map and also have it scroll smoothly. I've made a few attempts and while they're ...
0
votes
0answers
76 views

UV texture mapping with perspective correction works for 50%

So, I've been trying to get the UV texture mapping down with perspective correction. The triangle rasterization seems to work. The interpolation seems to work too. It's just the perspective ...
2
votes
1answer
102 views

Tiled - move all tiles

I'm making a map in Tiled. I quickly ran out of room in the north of my map and would like to "shift" the tiles down. I'd prefer not to have to redo each of the tile layers. Is this possible? This ...
1
vote
1answer
50 views

Why can't CSS Sprites handle vectors?

Almost all the documentation available either says that "sprites are bitmaps" or that "css sprites must be bitmaps". Is there a specific reason for this? Is it, in fact possible to create a css sprite ...
0
votes
0answers
583 views

How to draw my android Hexagons in a grid?

I am trying to create a hexagon grid using the Android ’Canvas’ package. I have a working ’Hexagon’ class that when used in a view will draw a single hexagon on screen. The problem is that I need many ...
5
votes
1answer
296 views

Roguelike 2D Collision Detection

I'm just a normal guy trying to do some basic collision detection but I suck at it. I either get stuck in a wall or I go in reverse in the wrong direction trying to update the player position to a non ...
-1
votes
1answer
245 views

Adding obstacles & collision to canvas game

I am trying to add some obstacles to the canvas game that I've got but something seems to be wrong and I can't seem to put my finger on it. I just want some simple walls here and there to make the ...
1
vote
1answer
167 views

svg spaceship game movement 2d

I've been searching for a way to make an svg box move to all directions using js. I have seen many tutorials on how to do it grid like, but I want it so have a square that can turn, move forward, ...
2
votes
2answers
6k views

Android: Improving surfaceView?

I'm using Surfaceview in my Android app. I have two threads, one for UI and another for rendering and updading the UI. I am limiting my frames per second to 30 fps and have employed frame-skipping ...
3
votes
0answers
342 views

Card Masking in Phaser

Good Day, I'm new to Phaser and still learning about it to. I am challenging my self to create a simple animation of a card flip somewhat realistic rather that making use of a scale. This is ...
0
votes
1answer
69 views

Rectangles clear each other when moving on canvas

I am having this problem after moving rectangles, they seem to delete one another. Most probably it is a problem with clearRect(...) method. This is the clean function I am using: clean: function(...
-1
votes
2answers
962 views

How do I make a sprite blink on an HTML5 canvas?

I'm thinking of the flashing effect many games have when a character gets hit and takes damage. Something like overlaying a lighter color on visible sprite pixels for a second.
1
vote
1answer
544 views

Cocos2D-JS Windows App in fullscreen mode (Win32)

I've been looking for a way to make my Cocos2D-JS app go into fullscreen mode, but there doesn't seem to be much documentation on Cocos2D-JS (or Cocos2D-x-js as some seem to call it.) This app is to ...
1
vote
0answers
30 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-...
4
votes
2answers
2k views

HTML5 game fps render lag

I am currently creating a flappyBird-like HTML5 game using Proccessing.js You can see current work here: http://files.tips4design.com/flappySlothRelease/ The problem is that even though the FPS is ...
13
votes
7answers
11k views

To canvas, or not to canvas, when building browser-based games?

Background: I have extensive development background, but the last time I coded a game was many years ago. My Javascript skills are quite limited, and I intend to improve them by building a simple game ...
3
votes
1answer
259 views

How to implement user friendly screen panning on 3D HTML canvas for RTS game

How can I get RTS map panning like how it was done in C&C red alert (with the mouse at the edge of the screen moves the screen in that direction) with a Babylon.js RTS game in the html canvas? ...
0
votes
0answers
71 views

Collision detection in JavaScript Canvas game - Issue with 'if' statements [duplicate]

I am currently developing a simple browser-based game and seem to be on the cusp of collision detection that doesn't just return the player to where they were before, but actually will slide them ...
3
votes
1answer
381 views

How can I create 2D, sprite-based reflections in HTML5 Canvas?

I'm trying to create simple reflections in a 2D, sprite-based game using HTML5. I'm looking to recreate an effect like the one you'd often see in GBA games, such as Pokemon Emerald and Mother 3: ...
1
vote
1answer
1k views

Rotate arrow on canvas

I need to draw a flow dynamically based on some user choices. In that flow I want to draw the choices (blue circles with number) and the directions of that choices (line and arrow). For example: node ...
10
votes
5answers
6k views

Poor performance in android when running APK, runs fine in browser

I have created a small game project in HTML5 using Phaser engine (tried both 1.1.5 and 1.1.6). Then to port it to mobile platform, used Phonegap/Cordova for Windows Phone 8, Android and iOS. In my ...
0
votes
0answers
30 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 ...
3
votes
1answer
824 views

Why would it be faster to render using multiple canvas elements?

This video suggests that rendering using multiple canvas elements helps performance. How does this work? The idea was to use one for the player, one for the enemies, another for the background, ...
2
votes
1answer
2k views

What is the difference between a Facebook Canvas and Facebook Web project?

I am making a game on cocos2d-JS for Facebook. What is the difference between Facebook Canvas & Facebook Web project. From what I can tell, Facebook Canvas ask for the secure url and Web ask for ...
4
votes
3answers
2k views

Procedurally Generated Top View 2D RPG Map Generation

Procedural generation is a fascinating concept and is gaining popularity in the gaming industry. The thought of playing a game that has new content every-time the game is played is very exciting to ...
1
vote
1answer
147 views

Set a different animation rate for moving player NOT using a sprite

I am trying to start making a simple game using HTML5 with a canvas and some JS. I have a player whose movement I am comfortable with, but the rate at which the player animates when it moves is too ...
1
vote
2answers
245 views

How to access bottom canvas layer in HTML?

I have such html: <div id="main_window"> <canvas id="canvas_hex_logic" width="200" height="100"></canvas> <canvas id="canvas_ground" width="200" height="100"></canvas> ...
0
votes
1answer
112 views

Initial force to achieve orbital velocity

I'm attempting to get asteroid to orbit a black hole that is asserting gravity. Some parts currently work, like the black hole asserting gravity, attracting asteroids in and destroying them. And ...
1
vote
2answers
435 views

Canvas - darken sprites rendered by drawImage

I am implementing lighting in a tile engine, and I need a way to darken tiles, based on their light level. For the ground tiles, I can clear the context to black, then set the globalAlpha and use ...
1
vote
2answers
4k views

Moving a sprite towards an x and y coordinate

Given a sprite with an x and y coordinate, how would I move it toward another sprite with an x and y coordinate? I've already made it face towards the other sprite, and I've made it move towards the ...
30
votes
5answers
6k views

Should actors in a game be responsible for drawing themselves?

I am very new to game development, but not to programming. I am (again) playing around with a Pong type game using JavaScript's canvas element. I have created a Paddle object which has the following ...
1
vote
2answers
163 views

Offset during zooming to keep object within boundries

I have a simple zoom feature which lets the user zoom in and out. I'm having an issue how ever when i zoom out the object gets smaller to the point that the boundaries become broken. The idea is the ...
4
votes
1answer
623 views

How can I full-screen a Facebook canvas game?

Is there any way to allow the user to click a button on a Facebook canvas app and allow the app to go full-screen? If it's possible, is it permitted by Facebook?