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

learn more… | top users | synonyms

8
votes
5answers
544 views

What implications does JIT (javascript/canvas) vs. AOT (Flash) have in terms of browser based game performance?

In my experience, even till this day, I still see more of a visual lag in entity movement / animation in JavaScript (Canvas) based games than I do in Flash based games. Why is this - what exactly is ...
1
vote
2answers
429 views

Frustum Culling/Only rendering what's viewed by the Camera in HTML5 Canvas?

I coded up a simple 2D Camera for my HTML5 Canvas-Based Game Engine but I noticed the performance wasn't very good. So a lot of people suggested only rendering things that are shown by the camera but ...
3
votes
2answers
159 views

Deactivate keyboard input on collision

I'm creating an online-canvas-game with a tank as player object. Now I have several structures in my canvas, that shouldn't be able to be overdriven by the tank... My solution is to detect the ...
3
votes
1answer
676 views

HTML5 Canvas fillStyle as numbers not text

When drawing vector graphics in the canvas you set the fillStyle using an rgba string like this... context.fillStyle = "rgba(255, 223, 191, 1)"; Is it possible to feed in a javascript object ...
-1
votes
0answers
67 views

ball 2d animation [duplicate]

Possible Duplicate: canvas ball physics animation I want to animate ball in html canvas like this. ctx.beginPath(); ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); ...
4
votes
2answers
1k views

canvas ball physics animation

I want to animate ball in html canvas like this. ctx.beginPath(); ctx.arc(75, 75, 10, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); start position is left top corner and ball's maximum ...
6
votes
1answer
1k views

HTML5 Canvas Converting between cartesian and isometric coordinates

I'm having issues wrapping my head around the Cartesian to Isometric coordinate conversion in HTML5 canvas. As I understand it, the process is two fold: (1) Scale down the y-axis by 0.5, i.e. ...
1
vote
1answer
726 views

Converting coordinate systems to/from an isometric game world

I have tried searching and reading for an answer, but the information I could dig up either didn't fit what I need or was in the form akin to "Just multiply the vectors with the inverse matrix of.." ...
0
votes
1answer
886 views

How to display a tile map from a 2D array in JavaScript?

I have stored my map, but the problem I am having is displaying it. My map is 100x100 tiles which are 40x40px. I have my loop running through the array but I'm having difficulty selecting the portion ...
1
vote
2answers
1k views

Is it possible to convert file from Blender 3d to svg?

I want to build web game in html5 with canvas/svg. Can I convert/export file from blender to canvas/svg? Maybe via unity3d?
3
votes
1answer
1k views

Canvas tile grid, hover effects, single tilesheet, etc

I'm currently in the process of building both the client and server side of an HTML5, canvas, and WebSocket game. This is what I have thus far for the client: http://jsfiddle.net/dDmTf/20/ Current ...
1
vote
2answers
843 views

Matrix rotation of a rectangle to “face” a given point in 2d

Suppose you have a rectangle centered at point (0, 0) and now I want to rotate it such that it is facing the point (100, 100), how would I do this purely with matrix math? To give some more specifics ...
1
vote
2answers
1k views

Creating several instances of the same object, and selecting only one

I'm playing around with making a puzzle game, haven't done that much before I run into my first problem. I want to create a certain amount of the same object/function. But without hardcoding the ...
10
votes
2answers
581 views

Dirty 2D map rendering

I keep hearing people talk about "dirty rendering" when it comes to map rendering for HTML5. I've Googled and searched the GameDev about it but there isn't much about it. What exactly is it? How to ...
3
votes
0answers
254 views

Choosing a (browser) game environment [closed]

I apologise in advance if this post is something you've heard a million times already or seems like a trolling attempt. I just want some advice and I'm coming up short with my own Google searches. ...
5
votes
4answers
1k views

Making a startscreen for an HTML5 game?

How would I make a start screen for a game using HTML5 canvas? I'm not looking for something advanced, just the new game button and highscore link etc. The question might be stupid, but I've never ...
2
votes
2answers
1k 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 ...
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 ...
2
votes
2answers
1k views

Drawing isometric map in canvas / javascript

I have a problem with my map design for my tiles. I set player position which is meant to be the middle tile that the canvas is looking at. How ever the calculation to put them in x:y pixel location ...
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 = ...
1
vote
1answer
271 views

Isometric Optimization in javascript

I'm having some issues with my optimization of my game. I have a simple tile map looped like this in my case the images are 64 by 64 pixels: for (i=0; i < 50; i++){ //horizontal for (j=0; ...
2
votes
2answers
443 views

Collision Detection doesnt work because some things move more than 1px at a time

I'm writing a 2d scrolling game in javascript using canvas and since I'm limited to setInterval running at minimum once every ms, I need to have some objects moving at greater than 1 pixel a second. I ...
2
votes
2answers
1k views

Javascript Isometric draw optimization

I'm having trouble with isometric tiles drawing. At the moment I got an array with the tiles i want to draw. And it all works fine until i increase the size of the array. Since I draw ALL tiles on ...
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 ...
4
votes
2answers
630 views

HTML5 multi-player game data/event validation best practices

I'll start by saying that I am fully aware that this question might seem subjective at first, but I'll try and provide a specific test case scenario for it to be a clear question about validating the ...
1
vote
1answer
1k views

Android-Handling screen clicks for dynamically moving objects in a view

I have a kind of broad question to ask but I have to start some where so.....What is the best way to handle onscreen clicks for moving objects being drawn on a canvas in a view. Im registering the ...
3
votes
1answer
501 views

Animating DOM elements vs refreshing a single Canvas

A few years ago, when the HTML Canvas element was still kinda fresh, I wrote a small game in a rather "unusual" way: each game element had its own canvas, and frequently animated elements even had ...
10
votes
2answers
845 views

How should I handling clipping vertices that are closer to the eye than the near clip plane?

I'm rolling my own 3D engine in Javascript and using only canvas drawing, no WebGL. This is another Minecraft clone, I love boxes, don't judge me. So far everything works wonderfully, except for one ...
3
votes
1answer
2k views

Optimizing HTML5 canvas transformed drawing in Javascript

I am trying to optimize my HTML5 game engine and have noticed that currently a majority of the time taken in the game loop can be taken when drawing transformed tiles. I think this is because each ...
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
1answer
1k views

How to make Moving road/track for android game? [closed]

I am very much new to Android game development. and i have little idea about the canvas and open GL. in one of my requirement i wanted to draw a moving road/track(Jazzy). how should i start. please ...
1
vote
1answer
3k views

How to rotate a moving canvas in Android

I am developing an Android game. In this game some trains are moving on tracks. I am able to move trains horizontally and vertically using two train images for horizontal train and vertical train ...
2
votes
2answers
968 views

Canvas Rotation collision detection on a sprite

I am using this code to detect collisions between two rectangular sprites. intersect: function(other) { return this.x < other.x + other.width && other.x < this.x + this.width ...
3
votes
1answer
545 views

Best resources for Canvas Html 5 development

I am at a competition at work for who can make the best canvas game. Theme is a top down shooter... Winner gets dinner for free. Anyways I have been looking around looking for some good resources on ...
7
votes
2answers
953 views

How to scroll hex tiles?

I don't seem to be able to find an answer to this one. I have a map of hex tiles. I wish to implement scrolling. Code at present: drawTilemap = function() { actualX = Math.floor(viewportX / ...
0
votes
1answer
580 views

Calculating bullet travel knowing coordinates and radian

I have a player sprite that has a x and y coordinate and also a radian. The radian determines which way the sprite faces in a top-down game interface. In this case, the radian points from the player ...
8
votes
1answer
1k views

Set sprite to face direction of mouse

I'm building a html5 canvas game and I need a way to get my sprite to face the mouse cursor. I have the X and Y co-ordinates for the sprite, and also the X and Y co-ordinates of the pointer. All I'm ...
2
votes
1answer
2k views

Collision detection between a sprite and rectangle in canvas

I'm building a Javascript + canvas game which is essentially a platformer. I have the player all set up and he's running, jumping and falling, but I'm having trouble with the collision detection ...
6
votes
2answers
2k views

How to efficiently store and display a tile map on the web?

About These are actually two questions in one. First of all I am looking for a way to efficiently store large amounts of tile data. The other aspect deals with querying the data set and displaying ...
2
votes
1answer
5k views

How do I make magenta in my PNG transparent in HTML5/Canvas/JS?

I'm putting together a simple hex map to use within an HTML5 / Canvas / JS game and before I get round to sorting any custom graphics, I was wondering if anybody knew how to make the pink/magenta ...
2
votes
2answers
357 views

How to draw objects that have a smaller Y axis first?

In my game there is a large 2D map of various objects. Example. As you see, upon creation objects of the same type (trees for example) are placed correctly, but objects of another type (enemies) are ...
2
votes
2answers
555 views

Animating sprites at different speed than what the game runs at

I am building a Javascript/canvas platformer game, and it's coming along nicely. The only problem I've really run into where I can think of any solution at all is the animation of my player sprite. ...
5
votes
1answer
3k views

How do I implement side scrolling in a javascript platformer?

I'm building a side scrolling platformer with Javascript and the canvas element for a school project. I have the character all sorted out. He runs left and right, and has a different sprite set for ...
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 ...
1
vote
1answer
1k views

Has anyone used PhoneGap to make 2D games for the iPhone? [closed]

I love simple casual games. I've been riding the bus a lot recently and so simple, no-brainer games are great fun and well worth the small price I pay on the App Store. It got me thinking... I know ...
5
votes
2answers
1k views

Calculating the angular direction from velocity

I'm trying to calculate the angular direction of a projectile, knowing it's X and Y velocity I can find the magnitude of its movement, but I'm having a hard time wrapping my mind around getting the ...
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 ...
3
votes
3answers
397 views

Commonizing cycle time across different browsers for HTML5

Is there a good (accepted) method for "fixing" the cycle time within an HTML5 canvas game implementation? The game that I have been working on runs far quicker in Google Chrome than in other browsers ...
3
votes
1answer
304 views

How do I show the current view from the viewport on my map?

I'm doing HTML5 Canvas development and currently have a large viewport (on the left) and a map (on the right). Like this: I need to show on the map what is currently being viewed in the left. And ...
0
votes
1answer
312 views

Drawing slope lines in a confined space

This isn't a game development question per se, but here goes... I have a 50x50 pixel space in which I need to draw five lines: X and Y axes, and one line for each of a steepest, average, and flattest ...