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

learn more… | top users | synonyms

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
307 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
410 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
253 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
761 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
288 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
283 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
109 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
141 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
548 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
627 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
232 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
81 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
997 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
171 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
227 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
986 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
389 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
731 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
126 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
126 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
275 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
408 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
100 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
3k 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
225 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
707 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
212 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
986 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
330 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
55 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
960 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
402 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 ...
1
vote
3answers
100 views

Move from point a, to point b, and determine the accuracy

Let's say I have a circle at point a (0,0), and I wish to move it to point b (23,58), whatever, how can I accurately do this with a speed variation if I wanted. (I'm doing this in javascript). Every ...
0
votes
2answers
174 views

Physics for space game [duplicate]

I am making a space game where you fly a ship. I am trying to work out the physics for such a game and so far came up with: var thrust; //between 1 & 100 how much the engines are pushing var ...
-2
votes
1answer
59 views

Error returning a value from a function? [closed]

It tells me the error is on this line: this.srcX = ShipSrcXPicker(type); However I cannot see it? I am returning the values from these methods that are being called? Is there something I am missing? ...
-4
votes
2answers
252 views

Moving Character Based on background [closed]

I want to know how can i move the following character just in predefined areas as shown in the bg.jpg file character http://s7.postimg.org/ezyaclrrb/walking.gif bg ...
0
votes
1answer
209 views

How can I draw a small bitmap on a larger bitmap at a particular position? (Canvas / SurfaceView)

I'm building a game that requires additive blending of colours for certain bitmaps. Say I have 4 different types object, there are maybe ten of each type on the screen with each type having a ...
-1
votes
1answer
298 views

View port for my canvas game

I am developing a canvas game, and im struggling to get my head around how i can make a view port so when the character moves the world moves with it. Unlike traditional 2d maps built with arrays i ...
2
votes
1answer
425 views

JavaScript - 2D Top-down Tile Collision Detection

I am developing a small Top-down Game (Much like the old Zelda Games) and I'm having an issue in terms of Collision detection (The actual theory itself rather than assigning Tiles as solid, etc.) I ...
2
votes
1answer
226 views

Low FPS on Java drawing in BufferStrategy

I ran into a very strange problem while using BufferStrategy, I've tried searching for an answer but all I have found are non-relevant threads and discussions. So here is my query. for (int i = 0; i ...
3
votes
4answers
3k 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 ...
1
vote
1answer
293 views

Canvas isometric translations to integer coordinates

I'm creating a canvas based game with an isometric playing board. I use the following transformations to get my square tiles to render on the screen: 'applyViewportTransformation' : function() { ...
15
votes
6answers
6k views

Are there any alternative JS ports of Box2D?

I have been thinking about creating a top down 2D car game for HTML5. For my first game I wrote the physics and collisions my self but for this one I would like to use some ready made library. I ...
-1
votes
2answers
1k 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 ...