A message from our CEO about the future of Stack Overflow and Stack Exchange. Read now.

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
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 ...
3
votes
1answer
474 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
2k 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 ...
1
vote
1answer
389 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 ...
2
votes
1answer
3k 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 ...
7
votes
2answers
1k 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 ...
2
votes
2answers
795 views

How to access bottom canvas layer in HTML?

I have such html: ...
0
votes
1answer
148 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
2k 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. ...
2
votes
2answers
716 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
2k 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 ...
3
votes
1answer
1k 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
637 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 ...
1
vote
4answers
833 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 ...
6
votes
3answers
5k 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
261 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
5k 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
2answers
3k 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 ...
0
votes
2answers
7k 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: ...
1
vote
2answers
2k 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
348 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
1k 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 ...
-1
votes
1answer
153 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
935 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 ...
-2
votes
2answers
189 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
4k 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
4k 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 (...
1
vote
0answers
94 views
5
votes
1answer
12k 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
929 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 ...
12
votes
6answers
8k 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 ...
5
votes
2answers
4k 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
169 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: ...
0
votes
1answer
860 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: ...
0
votes
2answers
2k 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
169 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: http://lazyeels-...
0
votes
1answer
83 views

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

Jsfiddle : http://jsfiddle.net/seekpunk/6eeKH/15/ the code : ...
1
vote
3answers
918 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
119 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 ...
2
votes
3answers
3k views

Canvas setTransform function clarification

I'm currently building some kind of fake-3D dungeon, and I'm facing some difficulties understanding the behavior of the setTransform() function. Here's my simplified code: ...
0
votes
0answers
24 views

Clicking on a canvas getting polygon [duplicate]

I'm using Canvas to create polygons like this: http://bl.ocks.org/mbostock/6675193 I want each of those polygons to represent a clickable province. How do I know which province is clicked when the ...
3
votes
1answer
2k views

How can I detect mouse events on sprites in a canvas?

I'm making an HTML 5 game. I want mouse clicks on sprites drawn in a canvas element cause events that my code can react to. At the moment, I'm doing it by checking through all of my sprites in a for-...
1
vote
1answer
2k views

How to draw many identical quads in WebGL efficiently?

I have recently been trying to develop a more basic one of those 'falling sand'/'powder game' style games (See here) the past few months, and after prototyping on a plain canvas, then trying PIXI.js, ...
1
vote
1answer
1k views

Implementing fog of war on HTML5 canvas

I have been wrestling with creating fog of war for a while now. I actually did create it, but I consider the implementation too resource-heavy to be usefull. For initial information: I use createjs / ...
0
votes
2answers
974 views

translating canvas for rotating sprites that shoot

I am trying to align bullets to my different sprites guns (top down 2D for android). Right now Im using this method to draw my bullets: ...
1
vote
2answers
2k views

HTLM5 canvas game (easeljs) slow peformance on ipad (ios7) with phonegap

I have developed a game with easeljs for HTML5 Canvas. the game is a single HTML5 page with canvas and a lot of javascript. All this time I tested the app on iOS Safari (iPad3 iOS7) with 40~50 fps ...
1
vote
1answer
7k views

Alpha Value at 0 Shows Black for Android Canvas Bitmap

There have been a few questions similar to this but none seem to give a straight answer. If I am creating a Bitmap from a .png image and want to set a color (i.e. true pink) to transparent, the color ...
1
vote
1answer
262 views

UI in Canvas-Games [closed]

I am quite new to programming with <canvas/> and WebGL, but very familiar in HTML5. So far, I have made to render some entities on the ...
4
votes
2answers
25k views

Is it possible to rotate an image on an HTML5 canvas, without rotating the whole canvas?

So I basically want to rotate single sprites on the canvas without rotating the whole canvas, is that someway possible. I also don't want to create a new canvas for each object I have. Also, it ...
1
vote
1answer
711 views

Replace a div (with a ball picture in it) with a 3D canvas ball [closed]

I am trying to make a game where you have to keep the ball on a green platform. At this point the ball is a div with a ball image. You can move the ball over the ...