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

learn more… | top users | synonyms

1
vote
2answers
255 views

How can I center a circle around a point on an HTML canvas?

I've got a job to make an engine and light game for canvas in HTML5. I like the things I make to be centered on the x,y positions I give it, I don't know why, it just helps me think about them ...
3
votes
2answers
580 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
281 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.
0
votes
1answer
109 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
0answers
189 views

Make bitmap moviment on android canvas using timer or handler/Runnable/postDelayed

Im trying to to move enemies on a android canvas, i have to update its x and y position every x time (run enemy.move() every x time). I got 2 problems: Currently im implementing my canvas redraw ...
0
votes
1answer
278 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). ...
1
vote
2answers
113 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
50 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
239 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
62 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 ...
1
vote
3answers
174 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: var can = ...
22
votes
2answers
1k views

My game is just about finished! What do I do now? [closed]

I have an HTML5/canvas game just about finished and ready to launch. It's a 2d game in which you explore and disrupt a procedurally-generated landscape, crafting items and structures to survive. I ...
0
votes
0answers
18 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 ...
0
votes
2answers
322 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: public void draw(Canvas canvas){ update(); ...
3
votes
1answer
502 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 ...
2
votes
1answer
260 views

How can I repeat only a portion of an image in Javascript?

So I'm trying to repeat a portion of my spritesheet as a background. So far, I have attempted this: var canvas = $("#board")[0], ctx = canvas.getContext("2d"), sprite = new Image(); ...
7
votes
1answer
797 views

Jump handling and gravity

I'm new to game development and am looking for some help on improving my jump handling for a simple side scrolling game I've made. I would like to make the jump last longer if the key is held down ...
1
vote
1answer
318 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 / ...
1
vote
1answer
336 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
118 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 <canvas/>. Next would be to add a simple HUD to it. ...
0
votes
0answers
163 views

detection of a circle inside a rectangle in html5 canvas

I've created this game where the player can hit space to make the circle float in certain way. the main goal of the game is let the circle enter the rectangle .I did this code to create a collision ...
0
votes
1answer
718 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 ...
5
votes
1answer
1k views

What's the difference between Canvas and WebGL?

I'm thinking about using CAAT as a part of a HTML5 game engine. One of it's features is the ability to render to Canvas and WebGL without changing anything in the client code. That is a good thing, ...
0
votes
1answer
628 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 ...
2
votes
1answer
3k 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
251 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 field, all works great. See it in ...
1
vote
0answers
86 views

Is pre-rendering Canvas graphics with ImpactJS safe? [closed]

I have several fairly complex menus I'm loading into my HTML5 game created with ImpactJS (skill trees, journal, equipment, ect). In order to draw them with a low performance impact I'm rendering them ...
3
votes
1answer
1k views

Converting cartesian geo-coordinates to isometric (real world map to game map)

I need to create an automated method to convert real cartesian, geo-coordinate data (such as roads and parks), into isometric coordinates as a game map view for use in HTML5 Canvas. Here is an image ...
3
votes
2answers
12k views

How to update off screen bitmap in a surfaceview thread

I have a Surfaceview thread and an off canvas texture bitmap that is being generated (changed), first row (line), every frame and then copied one position (line) down on regular surfaceview bitmap to ...
2
votes
2answers
174 views

Testing HTML5 canvas games on low resource computers

I've made a game in HTML5 & JS and want to test it on varying types of user setups as I've heard it doesn't perform too well on older MacBooks. How can I accomplish this? I'm thinking of ...
1
vote
2answers
237 views

Best way to do “cutscenes” [closed]

I'm curious about the best way to display cutscenes in canvas. When I say cutscene I mean something like a static image fading from one to the other. Would it be best to use a timeout for a certain ...
3
votes
2answers
1k views

HTML5/JS - Choppy Game Loop

I have been experimenting with HTML5/JS, trying to create a simple game when I hit a wall. My choice of game loop is too choppy to be actually of any use in a game. I'm trying for a fixed time step ...
1
vote
1answer
412 views

Do you need to make a tileset for a platformer?

I've been tasked to make a platformer, I've never made a tiled game before, is this necessary? I.e. can I just make different child classes of a Sprite class and add place them on the map, adding ...
4
votes
5answers
2k views

What would be a good way to implement/render a 2D tiled map for a browser game?

I coded a a little RPG in ruby and I used an array to contain the map squares. The elements of the array (which defines the X coordinates) are arrays themselves whose elements defines the Y ...
2
votes
1answer
847 views

OpenGL slower than Canvas

Up to 3 days ago I used a Canvas in a SurfaceView to do all the graphics operations but now I switched to OpenGL because my game went from 60FPS to 30/45 with the increase of the sprites in some ...
0
votes
1answer
127 views

Why does my goblin only choose a walk direction once? [closed]

I'm working on a simpe 2d canvas game that has a small goblin sprite who I want to get pathing around the screen. What I originally tried was a random roll that would choose a direction, the goblin ...
1
vote
3answers
132 views

Can I use a translate function to implement a viewport?

I read this great question and its accompanying great answer about rendering a viewport in a top down 2D game: As for actually drawing the objects the camera can "see", you now draw all objects ...
0
votes
2answers
299 views

HTML5 Canvas Parsing image into tileset while preserving transparency

I'm trying to import a Tiled Map Editor JSON file into my HTML5 canvas game but I'm having trouble with separating out the tileset image into separate images while preserving the transparency. ...
0
votes
3answers
436 views

Is there a way to create multi-resolution graphics for game with createjs?

I'm on a advanced development for a game made with createjs framework. However it's time to export it to some platforms. The graphics are made for the iPad 3 resolution. I would like to export them ...
0
votes
0answers
104 views

Bouncing objects against the side of the screen

I want to have certain circular objects bounce against all four sides of the screen. After searching a lot on the internet, I found the following formula: Vout = Vin - ((1+e) *dot(Vnormal, Vin) * ...
2
votes
1answer
4k 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 ...
2
votes
2answers
4k views

Rotate canvas along its center based on user touch - Android

I want to rotate the canvas circularly on its center axis based on user touch. i want to rotate based on center but its rotating based on top left corner . so i am able to see only 1/4 for rotation ...
0
votes
1answer
242 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 ...
1
vote
2answers
753 views

How can I create and animate 2D skeletons for HTML5 Javascript games? [closed]

I'm trying to make a 2D fighting game in HTML5(somewhat like street fighter). So basically there are two players, one AI and one Human. The players need to have animations for the body movements. ...
1
vote
2answers
221 views

Make perfect constant game animation using javascript

I tried different ways to make constant animations using JavaScript and HTML. The problem is that they are never perfect. If I want to move a square exactly 5 pixels every 50 miliseconds I would use ...
1
vote
2answers
1k views

How to draw a tileset using HTML5 canvas?

I have a tileset something like this: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 My tileset draw code looks like this: var image = new Image(); image.src = ...
3
votes
1answer
345 views

Multilayer game HTML5 canvas

I've have a problem with HTML5 canvas and using multiple layers. I'm using 3 layers. The first layer is where the player and the collision base objects are. And the second and the third layer have ...
1
vote
0answers
56 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 and would like some suggestions on ...
2
votes
3answers
1k views

Map building - Tower Defense

Before diving too deep into my question, let it be known that I am learning as far as java script goes and figured a simple Tower Defense game would be an excellent way to learn things. So I have ...
0
votes
3answers
425 views

how can we define dynamic Path of ViewObject(Bitmap) On Canvas

I am Currently working on One 2D Android Game, In this game One ViewObject(Bitmap) is moving Across Screen On Parabola Path Like in this Image, But this Path is Static, the Static path is getting ...