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
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 ...
2
votes
2answers
10k 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 ...
42
votes
5answers
10k views

Should actors in a game be responsible for drawing themselves?

I am very new to game development, but not to programming. I am (again) playing around with a Pong type game using JavaScript's canvas element. I have created a <...
2
votes
2answers
768 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
679 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
975 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 ...
0
votes
0answers
269 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 ...
1
vote
2answers
492 views

Bullet entry Point around Player Object

I have a player rotating by the mouse and want the bullets line up with the player's gun. Right now they simply come from the point of the player and shoot in the direction of mouse. I just need the ...
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: ...
-2
votes
2answers
192 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
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
362 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 ...
3
votes
2answers
847 views

Converting Doom maps to JSON [closed]

This is a really cool demo of a Canvas Doom Engine made back in 2006: http://canvex.lazyilluminati.com/84/play.xhtml Here is the e1m1 map in JSON format: http://canvex.lazyilluminati.com/84/map1.js ...
3
votes
4answers
2k views

Why wouldn't one use Canvas for HTML 5 game development? [closed]

I'm just getting into the HTML 5 game development. I've discovered that some games seem to be created using just JS/CSS/HTML instead of the canvas. Since canvas seems to enjoy good browser ...
10
votes
5answers
4k views

Good technological solutions to build an ascii map and moving characters in a browser (like dwarf fortress)? [closed]

I'd like to build a webapp for my game website that involves using text characters to represent animals and people, and have them move around on map squares with independent (server driven) AI. So ...
1
vote
3answers
509 views

Algorithm to zoom a plotted function [closed]

I'm making a game in android and I need plot a function, my algorithm is this: ...
3
votes
2answers
2k views

Client Side Logic vs Server Side Logic for HTML5 Game

I'm writing an HTML5 game that takes place in a single screen and does not have any data that would need to be saved (except for a score). I am writing all of my canvas logic on the front end. because ...
-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 ...
0
votes
1answer
448 views

Should I render all of my HUD views to a single SurfaceView?

I'm using a SurfaceView and canvas to implement a game HUD, title screens etc., by overlaying standard Android view widgets over my ...
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 ...
2
votes
1answer
997 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
1answer
2k 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
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 (...
10
votes
0answers
969 views

How to create 2D shadows [duplicate]

I'd like to create lights and shadows in a 2D environment, like in the image below: I did several searches but got no results. Do you have any hint?
2
votes
2answers
587 views

Glitch-free cross-fades in HTML5

In my HTML5 canvas game, I need to cross-fade two sprites which have some glow around them. (Glow is backed into sprites.) Initially, the first sprite is visible. During the cross-fade the first ...
1
vote
2answers
835 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 clearer....
0
votes
1answer
177 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: ...
1
vote
1answer
1k 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: ...
1
vote
2answers
170 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
84 views

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

Jsfiddle : http://jsfiddle.net/seekpunk/6eeKH/15/ the code : ...
1
vote
3answers
1k 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
133 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: ...
23
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
25 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
992 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: ...
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-...
2
votes
1answer
794 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: ...
7
votes
1answer
3k 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
2k 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
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
265 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 ...
1
vote
1answer
736 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 ...
3
votes
1answer
2k 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 ...
6
votes
2answers
30k 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 ...

1
4
5
6 7 8