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
3answers
1k views

Need Guidance Making HTML5 Canvas Game Engine [closed]

So I have some free time this winter break and want to build a simple 2d HTML5 canvas game engine. Mostly a physics engine that will dictate the way objects move and interact(collisions, etc). I made ...
1
vote
3answers
2k views

Where to start, to develop an online Backgammon game? [closed]

I would like to develop a backgammon game to play against other players online, as a way of learning more Javascript/jQuery and a little game development. I'm a web developer and most of my experience ...
1
vote
1answer
727 views

Why does my health bar disappear whenever my character takes damage?

I'm making a health bar for my game that looks like this: ...
1
vote
2answers
4k 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: ...
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 ...
1
vote
2answers
658 views

Object have the same “speed” all time JavaScript

I try to create a 2D game with a big map and multiple objects. The player is always in the middle of the screen and all the other objects is moving around so it feels like a big map. I want the ...
1
vote
3answers
2k views

Android, how important is deltaTime?

Im making a game that is getting pretty big and sometimes my thread has to skip a frame, so far I'm not using deltaTime for setting the speed of my different objects in the game because it's still not ...
1
vote
2answers
2k views

Calculating angle between two vectors to steer towards a target

I have been trying to implement a path following steering behaviour for AI in a 2D racing game. I have two vectors: futurePosition represents the predicted future ...
1
vote
1answer
3k views

JavaScript rendering: Canvas or DIV?

I am planning on developing a multiplayer RPG (kinda like RuneScape, but don't worry, with a different gameplay) and i want to do this in the browser. Now before saying things like "A MMORPG is hard ...
1
vote
1answer
5k views

Easy way to do gravity in a simple game?

I'm looking for an easy, beginner friendly way to do gravity in a platformer. I've looked into Box2D tutorials, but they all seem very complicated. All I want is a class that takes into account if my ...
1
vote
2answers
2k 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
1answer
906 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 ...
1
vote
2answers
859 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....
1
vote
2answers
85 views

Why are my shapes teleporting to the center of the map?

I am making a Diep.io Clone, and everything was going smooth until I made a collision resolution system for when a shape collides with another shape. Instead of them bouncing off of each other, they ...
1
vote
2answers
5k views

javascript game camera that follows my player

I am experimenting with game developement here but my player disapears my player is alowed to just walk of the screen and never be seen again so i was wondering if someone could help me with adding a ...
1
vote
2answers
785 views

HTML canvas, Node WebSocket and multiplayer game like slither.io. How to send visual data over websockets?

Where to start creating a multiplayer game like slither.io, agar.io, etc. I need only learn how to draw live positions and other data of all players into one fullscreen HTML5 canvas with update ...
1
vote
2answers
2k views

Canvas slowly degrades in performance after a while

I was creating a simple game and was shocked to see how the performance started to degrade. It never happened to me before, most probably because I use images and not the context drawings. So I used ...
1
vote
1answer
1k views

How should I efficiently clear and redraw my canvas with lots of animated sprites?

My current solution is to clear the entire canvas and redraw all sprites on every requestFrame(). This works but feels inefficient: I only need to clear the part of the canvas made invalid by ...
1
vote
1answer
4k views

How do I check if one square is overlapping another in HTML5 canvas

I have a little program that goes like this: Whenever somebody presses space, a blue square appears. The blue square shouldn't overlap with any other blue square. But the function that is checking ...
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 ...
1
vote
2answers
385 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
1answer
846 views

How to create an array of images on a canvas

I am developing a game that uses different images.When am image is swiped to the bottom of the screen it disappears and a new image appears at the top.Seeing as you can't delete an individual image I ...
1
vote
2answers
252 views

Which structures to use for maintaining 2D objects on canvas? How to map clicks to objects?

I need to draw some 2D objects on a canvas. And I need to map the 2D coordinates of clicks to objects. What is the usual way to maintain a 2D object's size and position (which data structures, etc.)?...
1
vote
2answers
5k 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 ...
1
vote
3answers
230 views

Draw the HUD just once on the canvas

I am not able to draw only one HUD of my game on a separate canvas, so I do not have to redraw it to each frame, I have four functions, init(), render(), loop() and drawHUD(): init() is my function ...
1
vote
1answer
186 views

How to automate the game

I am new to game development and I have a game where the car moves and picks the monster.But now I want to automate the game so it looks like it is played automatically. The control keys are given by ...
1
vote
3answers
505 views

Is it alright to have hundreds of canvas object on screen?

I am using html5 to build a game and it is based on Canvas not webGL. I am trying to build sprites from canvas object not from images. Because there will be many sprites on the screen and each of them ...
1
vote
1answer
1k views

Camera movement, Draw grid

If I have a 20x10 grid (640x320) where tiles are 32x32 The grid are rendered: ...
1
vote
1answer
80 views

Why can't CSS Sprites handle vectors?

Almost all the documentation available either says that "sprites are bitmaps" or that "css sprites must be bitmaps". Is there a specific reason for this? Is it, in fact possible to create a css sprite ...
1
vote
1answer
4k views

Rotate arrow on canvas

I need to draw a flow dynamically based on some user choices. In that flow I want to draw the choices (blue circles with number) and the directions of that choices (line and arrow). For example: node ...
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
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
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
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 ...
1
vote
3answers
204 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 ...
1
vote
3answers
140 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 ...
1
vote
1answer
436 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: ...
1
vote
1answer
7k 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 ...
1
vote
1answer
2k views

HTML5 Canvas Depth Sorting

I'm have problem with Isometric. I'm don't know how to name this "problem", but I'm show you some sceen what I get and what I'm need to get. My code now drawing something like: http://2.bp.blogspot....
1
vote
2answers
964 views

Multiple setInterval in a HTML5 Canvas game

I'm trying to achieve multiple animations in a game that I am creating using Canvas (it is a simple ping-pong game). This is my first game and I am new to canvas but have created a few experiments ...
1
vote
1answer
136 views

Completely Pixelated Font in JavaScript Canvas?

I'm making a game with a canvas scaled up such that each pixel is pretty big. I want to display some pixelated text without anti-aliasing but I have idea how I would accomplish this. Is there I way ...
1
vote
1answer
77 views

My HTML Canvas went blank

I tried to draw Mario Sprites in my HTML Canvas, but it always went blank. Anybody knows why? ...
1
vote
1answer
75 views

Collision detection between two arrays with nested loops: why do I get a crash?

I'm creating a game where waves of enemies are coming to me and I have to kill them. So far, I'm doing great: it took me hours to come up with this nested loop to check for collision detection and ...
1
vote
1answer
24 views

Changing JavaScript Player Object based on keypress

I'm currently working on a basic JavaScript top-down shooter and I've run into a dilemma. I'm trying to implement a basic toggle weapon system however when I press the key it changes the weapon ...
1
vote
1answer
282 views

How can I convert screen coordinates from a click to 2D scaled world coordinates?

I need a way to convert screen coordinates obtained from mouse clicks to world coordinates in my 2D game. To create a zoom effect controlled by the user, before drawing a model I will scale all of it'...
1
vote
1answer
47 views

How can I draw lines and curves on a canvas that's not rendered?

I need to draw lines and curves on a canvas that is not rendered on the screen but just updates the array of pixels that would otherwise be rendered. I need this to separate my game engine from my ...
1
vote
1answer
88 views

How do I make sure everyone sees the same distance across different resolutions?

Hello game dev community. I have recently got into making games in a browser window, and me and a friend ran into a common problem. Let's say I have a game like diep.io, where users can control their ...
1
vote
1answer
53 views

Is there a way to automatically group tiles in a A* pathfinding grid to find the largest areas?

I'm making an RTS game using html canvas. I've made a program that randomly generates levels in order to test my pathfinding script. it divides the pathable blocks into squares so that you can apply A*...
1
vote
1answer
33 views

How can I have more values in array on X axis than Y axis in my tilemap?

Following my old question Array of map data renders the map the opposite way after I got the answer to it and fixed my problem, I got another problem that occurs. If my ...
1
vote
1answer
325 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 ...

1 2 3
4
5
8