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
1answer
887 views

Javascript game engine that can work 'seamlessly' with react-native [closed]

I have experience with Unity, but I don't like the fact that Unity compiles your game directly into APK (or IOS equivalent). I want to modify the game to provide chat interface for multiplayer mode ...
0
votes
3answers
860 views

How to make space invaders destructible scenery and conform it to a shape?

We all like the bases that can be destroyed by chunks being split out, I originally implemented it by making a rectangle filled with individual squares (2x2 pixel size CANVAS rects) that would ...
0
votes
2answers
3k 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
2answers
846 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 tile(...
0
votes
1answer
395 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 ...
0
votes
2answers
3k views

How to draw an image on canvas without html

I'm trying to add a sprite to the canvas of my game. However, I don't want to use an image tag. However, I haven't found a way to do this no matter how hard I searched. Something like: ...
0
votes
1answer
3k views

HTML5 platformer collision detection problem

I'm working on a 2D platformer game, and I'm having a lot of trouble with collision detection. I've looked trough some tutorials, questions asked here and Stackoverflow, but I guess I'm just too dumb ...
0
votes
1answer
2k views

HTML Canvas drawing - Firefox error

I am getting the following error ONLY when running my game in Firefox (3.6) Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] The ...
0
votes
1answer
771 views

JavaScript - Updating a canvas real-time… from server-side or client-side

I have this 2D tilemap game 13x13 viewport (169 tiles drawn on canvas at a time) of a 150x150 map. Each tile is 32x32px. Obviously I only update the 13x13 viewport... I want to update a canvas in ...
0
votes
1answer
435 views

How do I make an HTML5 canvas tiled map with tiles which have other than squared edges?

I'm creating an HTML canvas map and I'm trying to have the edges of the tiles not appear square, as in the tiles merge in to each other. I've scoured the internet for hours but can't seem to find ...
0
votes
1answer
40 views

HTML Canvas Makes Everything Bolder On Right Side

For some strange and sudden reason, my canvas seems to make lines thicker and darker on the right ~1/4-ish. I have tried multiple browsers and different computers and they all have the same rendering ...
0
votes
2answers
8k 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: ...
0
votes
2answers
1k 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: ...
0
votes
2answers
4k 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 ...
0
votes
2answers
1k views

Animating sprites in HTML5 canvas

I'm creating a 2D platformer game with HTML5 canvas and javascript. I'm having a bit of a struggle with animations. Currently I animate by getting preloaded images from an array, and the code is ...
0
votes
1answer
104 views

How to get the address of a nearby square on a chess board?

I'm making a chess game from scratch and I got stuck. So far I have all my figures placed, I have the positions set, I've already done the collision detection and everything. When I click the figure ...
0
votes
2answers
67 views

How can I delete an object when it's not stored in an array?

I have a boss appearing in my game, but since it's only one character I didn't put it in an array. Now I'm trying to make disappear if its health is less or equal to 0 but I don't know how to do that. ...
0
votes
2answers
63 views

Player fly's off of canvas when key pressed

I am fairly new to game development. I am programming a basic JavaScript canvas game. Whenever I press a key my player goes flying off of the canvas. Here is the controller code ...
0
votes
1answer
44 views

Extract formula from vector drawing

I am creating a game with HTML5 canvas for browser. I want to create animations with many shapes, which would be drawed with canvas, not from spritesheets. The problem i face now is - to create ...
0
votes
1answer
578 views

How does the double-buffered canvas know when to swap the buffer?

How does the HTML5 canvas know that all the drawing operations are complete and it's time to swap the buffer ? Program can have multiple draw calls at different places so how will it know when is the ...
0
votes
2answers
58 views

Limiting Framerate and Input

So I have been learning HTML5 canvas recently and ran into a bit of a snag. I created a proof of concept that builds a block based 2d map that you can move a character inside of using arrow keys. This ...
0
votes
1answer
150 views

A logic error. canvas: balls physics, bounce

Hi I was making a program that simulate a bunch of balls bouncing, but the problem is some balls got stuck to the floor. Since it's a logic error, it is kind of difficult to find. Can someone help, I ...
0
votes
1answer
220 views

Perlin noise terrain issue when scrolling

I am generating a terrain in Javascript canvas using this js project for the Perlin noise. I have an array of points, and when one point leaves the left-hand-side of the window, it is removed, and a ...
0
votes
1answer
153 views

android canvas rope swing

I'm creating the code, where a player swinging on a rope for the moment I got this ...
0
votes
1answer
312 views

Rectangles clear each other when moving on canvas

I am having this problem after moving rectangles, they seem to delete one another. Most probably it is a problem with clearRect(...) method. This is the clean function I am using: ...
0
votes
1answer
852 views

How to draw small sprite bigger?

I have created an image with the resolution of 25px(width)*34px(height) (I know it's unusual, however it doesn't bother me now). The problem is that when I try to display it by creating a bitmap, it ...
0
votes
1answer
149 views

Initial force to achieve orbital velocity

I'm attempting to get asteroid to orbit a black hole that is asserting gravity. Some parts currently work, like the black hole asserting gravity, attracting asteroids in and destroying them. And ...
0
votes
1answer
690 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 ...
0
votes
3answers
1k 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
3answers
954 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 ...
0
votes
1answer
493 views

Player movement behind objects

I was playing around on RPG JS and Browser Quest, and the player, when moving, can give the effect of walking behind the trees or houses etc, so the player effectively disappears while it is "behind" ...
0
votes
2answers
40 views

Performance of many canvas drawImage calls is very slow

I'm developing a top-down 2D tile-based canvas game. I have a single sprite sheet of all my tiles, and then a JSON tile map array of where they're placed. Previously I would render all the layers of ...
0
votes
1answer
22 views

Line strokes also adding borders to other shapes?

When you run the project, you can see that the first circles have a black border around them. When I remove the Game.drawLines(), the circles don't have the border ...
0
votes
1answer
57 views

How to Generate Level Map Based on Golden Ratio

I am trying to generate a map based on the Golden Ratio: a+b is to a as a is to b. I was looking at a JavaScript math library that had a built-in phi, but I wasn'...
0
votes
1answer
30 views

I can't clear the paint image in my Canvas

I'm trying to make the Mario move, but somehow it leaves traces behind, can anybody help??? ...
0
votes
1answer
128 views

How do I change the level of my game by changing the file loaded?

I am making this 2d canvas game in JavaScript and I want to switch to file level2/level2.html when the boss of level 1 (...
0
votes
1answer
133 views

frame rate drop in html5 game

i have Incorporated gravity mechanics and collision mechanics to my game. the game works fine for some period of time after that i am getting significant amount of frame rate drop.i am doing some ...
0
votes
2answers
287 views

How to get projectile direction vector in a 2d grid?

I am having trouble figuring out how to trace the path of my projectiles in an Asteroids clone. Currently the ship is locked to the center of the screen and can be rotated a full 360 degrees. I know ...
0
votes
1answer
55 views

Canvas Infinite Map: How to have reappearing objects at static X,Y even when looping

I made a html canvas example of an infinite scrolling map with objects in static places. As you can see in the Fiddle below, when you move left with the Arrow Keys, you can see that the map does not ...
0
votes
1answer
193 views

How to use arrow keys to navigate between cells in a crossword puzzle

I am making a crossword puzzle, using a canvas. How do you get the keyboard arrows to interact with the screen so that when the user presses any of the arrow keys, the cursor will advance to the next ...
0
votes
1answer
599 views

Character collision detection on 2D array tileset based map

I have a very basic collision detection working, but not quite there yet. Now as I understand I'm only checking against the left top corner of the character for collision detection. And it only works ...
0
votes
1answer
119 views

How to get character position in 2D map array by its position on canvas

My arrayMap consists of 0, 1 and 2. 0 is water and character is allowed to be on. 1 and 2 are ground and the collision should happen. To get and check what array number the character is standing on, ...
0
votes
1answer
350 views

Javascript/HTML5 canvas: Integrate scrolling tilemap with map server

I am playing around adapting the example code at Mozilla Dev Network: Square tilemaps implementation: Scrolling maps to fit with a server I wrote myself. There's a link to the original source code at ...
0
votes
3answers
8k views

JavaScript canvas remove image

I'm writing a platformer and I want to implement own art, now I know how to display it and this isn't my question. It rather is how do I remove it? I tried drawing a rectangle over it and removing it, ...
0
votes
1answer
65 views

DOM for GUI - display animated objects

I'm creating an HTML5 game using Canvas, but want to use DOM for the GUI for the reasons mentioned in there articles: http://blog.sklambert.com/html5-game-tutorial-game-ui-canvas-vs-dom/ http://www....
0
votes
1answer
609 views

HTML5 Canvas non-geometric edge trace for collision detection

I had a question about how to do edge tracing for use in collision detection for a game - think 'Asteroids'. I couldn't frame the question clearly so I did some R&D. The question I had in mind was ...
0
votes
1answer
171 views

Most efficient way to detect and act upon collision (Specific for my 2d game)

Currently, mainly just for fun, I'm working on a 2d game where I have all collide-able blocks (background) assorted into an array when its loading, along with the player put into a different part of ...
0
votes
1answer
33 views

How to change the color of an image when getting points

Currently I have a car game which I give points when a car touches the monster.Now extra to that I also wanted to change the color of the car or replace the car image with a different color car image ...
0
votes
1answer
117 views

How to turn the car when pressing left or right key

I am new to canvas and developing a game where a car moves straight and now I want to turn the car to anti clockwise when the left key is pressed and clockwise when right key is pressed. Currently I ...
0
votes
1answer
316 views

Character movement resetting x & y position in HTML5 game

I have an HTML5 game I'm working on and I'm at the point where I'm trying to make the character move. For the most part, the character(A rectangular square) is moving, but it's not moving from its ...

1
4 5
6
7 8