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

learn more… | top users | synonyms

0
votes
0answers
11 views

possible way to bring canvas 2d animation in canvas webgl context

when added 2d animation canvas in 3d webgl canvas as texture, 2d animation and 3d animation both stopped working. Any reference for this.
0
votes
0answers
62 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 ...
2
votes
1answer
111 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: ...
0
votes
1answer
78 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 ...
0
votes
1answer
125 views

Game sprite far too small

So I started writing an Android 2D game. I've come to the point where I want to display my character image on the screen. I read that most sprites have a resolution of 16*16, or more. So I created an ...
0
votes
0answers
25 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 ...
2
votes
1answer
78 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? ...
3
votes
1answer
635 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, ...
0
votes
1answer
59 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 ...
0
votes
0answers
47 views

Drawing to canvas on a low end Android device

Recently I have noticed some of the low end Android devices have issues running my game. I've managed to get a screenshot of this bug: Once game is running, only the top left corner image will ...
1
vote
1answer
83 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 ...
1
vote
0answers
106 views

Shadows in html5 canvas game

I'd like to ask for reference. I met an article about how to cast shadows in games. I'm using html5 canvas (currently without webgl) with javascript for my projects. The article mentioned above is ...
0
votes
2answers
69 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
69 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 ...
0
votes
1answer
181 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. ...
1
vote
0answers
105 views

Simple track method for 2D car game? [closed]

I'm a new programmer and I am trying to make a 2D car game on an html5 canvas with javascript and JQuery. I have got the basic car motion down, check it out here: ...
1
vote
2answers
61 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 ...
0
votes
1answer
305 views

Android Canvas 2D Game: Supporting multiple screen sizes/resolutions [duplicate]

I'm planning to develop a 2D game for android devices by using simple Canvas Surfaces (I know that OpenGL might be more efficient - but Canvas should definitely be enough for my type of game). I'm ...
1
vote
1answer
156 views

How do I procedurally create a directional light cone with an HTML canvas?

To create a directional light effect, I want to draw this kind of transparency mask on an HTML canvas (using context2d): I also want to be able to generate such a mask dynamically. I've tried using ...
0
votes
1answer
164 views

Map scrolling around the world

I am developing an TBS (turn based strategy) game. I have created a simple canvas renderer to render hexagonial map. I already implemented scrolling on the map. My current problem is that I want to ...
0
votes
4answers
175 views

How to handle a negative coordinate 2d map with a growing map size

I love this procedural generation theory and have been messing around with it. However I'm having trouble wrapping my head around how to store my map data. Usually I store my map data in a 2d array ...
3
votes
3answers
627 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 ...
0
votes
0answers
76 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 ...
1
vote
1answer
121 views

Removing a previously rendered image on a canvas

I made a platformer using ctx.clearRect and ctx.fillRect, so each time the player moved I would just delete the previous position and draw him again. Now I'm working on importing my own art into the ...
0
votes
0answers
124 views

Puzzle Game on Android using canvas with matrix

I'm making a slide puzzle game on android. I have handled the gestures and tranaslate the matrix that holds the pieces succesfullly, and I have made the logic when the pieces get on the border of the ...
0
votes
0answers
60 views

How do I repeat parts of some images in 2D Array in JavaScript but not all of them?

OK, I am trying to make a game that is a little bit like SimTower but utilizing HTML5 (particularly the canvas element) and JavaScript with a little CSS. I have progressed pretty far in the past week ...
0
votes
2answers
277 views

How to move an image back and forth with javascript

I currently am trying to make a baseball game and have this code here: http://jsfiddle.net/769BK/ I have the baseballX set to a decrement, and then I try increasing the value using baseballX++; but it ...
0
votes
2answers
395 views

How to move an object using X and Y coordinates in JavaScript

I am making a 2d baseball game with JavaScript and HTML5 and am trying to move an image that I have drawn with JavaScript like so: //canvas var c = document.getElementById("gameCanvas"); ...
0
votes
0answers
114 views

Drawing and scrolling paths performance problem

Hi I'm doing and endless sidescroller game where the terrain looks like a tunnel which is infinite. I managed to randomly generate the tunnel using this code: protected void createPath(){ path = ...
1
vote
2answers
277 views

How can I make EaselJS' skew behave like canvas'?

The skew property of a bitmap in EaselJS (given as angle) rotates the image such that it also flattens. I'd like to skew it without "squashing" it, as canvas does. JSFiddles, to demonstrate: Canvas ...
1
vote
2answers
85 views

How do you account for zoom in a top down viewport?

I've been stumped on this for days so please forgive me if this question is in bad-form. I have a generic top-down RPG structure, and I want to create a zoomable Canvas viewport for it. I've read ...
1
vote
2answers
157 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 ...
0
votes
0answers
111 views

EaselJS SpriteSheet isn't responding to gotoAndPlay

I'm developing a Fez-based HTML5 Canvas game using EaselJS and I've found a problem, that I can't solve myself, while trying to implement SpriteSheets to the hero. The problem is that I've defined ...
-1
votes
1answer
112 views

creating an html5 game [closed]

I am working on a really simple online version of the parachute shooters game that was preprogrammed on old iPods. I'm pretty new to game development and so at first I tried to build the whole game ...
2
votes
1answer
153 views

How do I use createPattern with a spritesheet? [closed]

Say that I have a spritesheet like this And I want to use the dirt tile at (1, 1). I know that I can repeat an entire image using createPattern but how do I create the pattern from just the tile ...
-2
votes
2answers
133 views

collision detection algorithm issue

here is the jsfiddle i am working on so far : http://jsfiddle.net/TLYZS/ if you debug the code and check the collision function you can see that the collision is working fine when the user overlap ...
1
vote
2answers
1k views

Dealing with multiple animation state in one sprite sheet image using html5 canvas

I am recently creating a Game using html5 canvas .The player have multiple state it can walk jump kick and push and multiple other states my question is simple but after some deep research i couldn't ...
1
vote
1answer
215 views

JavaScript: Rotating a canvas around its center for a 2D sidescroller

I've been making a 2D sidescrolling game using JavaScript and HTML. The game is set in space, where the player character can fly around (Up, Down, Left and Right keys) and rotate the world around him ...
0
votes
0answers
60 views

HTML5 Canvas: Get rect coords after rotation (relative to screen)

update: function(delta) { for (var i = 0; i < this.bullets.length; i++) { this.bullets[i].velocity = this.bullets[i].speed * delta; this.bullets[i].contextX += ...
3
votes
1answer
3k 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 ...
5
votes
3answers
298 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 ...
10
votes
5answers
4k 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 ...
3
votes
2answers
774 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 ...
0
votes
1answer
116 views

What's the best way to time a character AI movement on android/java?

I'm creating an android game and I'm trying to figure out the best way to time a character position change, something like this: public void move() { //this.posX += 5; this.posY += 5; if ...
0
votes
1answer
323 views

2D to 3D perlin noise, I'm not sure I get it

I've been using 2d perlin noise to generate height maps for a little isometric terrain experiment. The noise value is directly related to the z-layer a tile will appear in: Math.floor(noise * 10). ...
0
votes
1answer
424 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
2answers
122 views

Calculate tile ID on a Reus style world with canvas context.arc()

I need a bit of math help for my game. I'm using Javascript and the Canvas tag to create a circular world, think God Finger, and Reus. The current version of my game is here: ...
0
votes
1answer
58 views

Update function in html5 canvas game isn't working properly [closed]

Jsfiddle : http://jsfiddle.net/seekpunk/6eeKH/15/ the code : if (this.collection.length > 0) { if (((this.collection[0].blockX + this.collection[0].blockW) >= cw) || ...
2
votes
3answers
281 views

Is it more efficient to encode rotation in a spritesheet or rotate at runtime?

I'm developing a game with JavaScript and HTML5 and I'm wondering about the performance implications of sprite rotations. There are two ways that I know to rotate a sprite: Rotate the actual sprite ...
0
votes
0answers
65 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 ...