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

learn more… | top users | synonyms

1
vote
1answer
94 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
105 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
312 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
623 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 ...
1
vote
1answer
2k 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
201 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
75 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
962 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
10k 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
167 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
215 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
942 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
339 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
512 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
125 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 ...
0
votes
0answers
22 views

Bones & Blood Sprite [duplicate]

I'm currently playing with a small 2d canvas game for fun. I'm looking for some images, primarily some bones and blood to be left in an XY position after killing an enemy. Does anyone know where I'd ...
1
vote
3answers
119 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
235 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
344 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
20 views

Fixed print on GLCanvas surface

Having extends class of GLCanvas and I want to print some fixed texts and pictures on its surface. What is the intelligent solutions for that ? So far I have - class PhaseOne extends GLCanvas ...
0
votes
0answers
96 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
210 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
604 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
200 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
906 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 = ...
5
votes
2answers
728 views

Is using multiple canvas objects a good practice?

We're developing a jump and run game with HTML5 and JavaScript and have to build an own game framework for this. Here we have some difficulties and would like to ask you for some advice: We have a ...
3
votes
1answer
306 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
838 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
372 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
98 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
164 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
242 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
168 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
282 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
404 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
189 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
288 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
5k 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 ...
1
vote
1answer
2k views

How to initialize a BitmapDrawable Android

I have been using a shapeDrawable object for my android games player but now that i want to add some graphics in I have to use something different I was thinking of a BitmapDrawable but as I am new to ...
0
votes
1answer
1k views

Simple javascript HTML5 canvas start menu

I'm currently looking for a simple and basic start screen for a game using javascript, so basically its the first function that is called and then press play which then goes into the game. Looked ...
1
vote
1answer
881 views

Implementing a camera on HTML5 canvas?

I am trying to work out the best way of implementing a camera in my simple 2d game. The way it is structured at the moment is my game objects all have draw functions, which are passed a canvas ...
20
votes
7answers
9k views

HTML5 Game (Canvas) - UI Techniques?

I'm in the process of building a JavaScript / HTML5 game (using Canvas) for mobile (Android / iPhone/ WebOS) with PhoneGap. I'm currently trying to design out how the UI and playing board should be ...