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

learn more… | top users | synonyms

2
votes
3answers
231 views

How do I correctly make character sprite direction match player inputs?

In my top down game I can move the character around and the character will even face the direction he is moving. However, there is some weird behavior I'm having: when you hold down one direction and ...
2
votes
1answer
53 views

Best practice/way for client to speak with server

I'm making a multiplayer game in HTML5 Canvas and Node using Express and Socket.io. It's a platformer style game and so far the players are able to see each other and move around on the screen. It ...
0
votes
0answers
21 views

Creating new browser multiplayer game

I decided to make an browser-based multiplayer game with huge armies. So far in a year i have created an army editor, where you can create armies, place then anywhere, set several moving targets and ...
1
vote
3answers
98 views

Limit access to socket end point

I'm developing a multiplayer canvas game based on socket.io and box2d physics engine. Is there a way to limit connections to my socket endpoint and only allow connections from a specific domain? ...
1
vote
1answer
73 views

Fastest way to render isometric world with moving entities?

I've got an isometric diamond-shaped world. The world consists of isometric planes like rooms. The walls and floors of the rooms and all obstacles and items in the rooms are isometric entities. So I ...
0
votes
1answer
54 views

How to fill a canvas with triangles that are seemingly random?

Given a canvas say, 1000 X 1000 unit. I would like to fill the canvas with triangles. The triangles can be of any type right angle, equilateral...etc. To avoid big chunks of triangles lets say all ...
0
votes
2answers
892 views

How to move an image back and forth with javascript

I currently am trying to make a baseball game and have this code here: http://jsfiddle.net/769BK/ I have the baseballX set to a decrement, and then I try increasing the value using baseballX++; but it ...
0
votes
2answers
2k 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 ...
3
votes
2answers
413 views

Shadows in html5 canvas game

I'd like to ask for reference. I met an article about how to cast shadows in games. I'm using html5 canvas (currently without webgl) with javascript for my projects. The article mentioned above is ...
1
vote
1answer
29 views

World Space canvas rendering in front of line mesh

I'm attempting to attach a pointer to my steamvr controller to simplify world interactions. I'm very new to unity, but found a nice volumetric line asset (VolumetricLines) that aesthetically is ...
0
votes
0answers
35 views

Detecting collision of multiple moving objects

I have wrote a simple game that has a 100 balls bouncing off the borders of the canvas. Each ball is an instance of ball class function that has the following definition: var cnv = document....
1
vote
1answer
170 views

Drawing/adding shape objects with the mouse on html canvas

I've started with the canvas paint tutorial from link which worked fine with a few problems that can be fixed later. I've been checking a lot of posts on drawing shapes on the canvas but they all use ...
0
votes
1answer
37 views

js canvas tiled map - for loop, while, or matrix

I am making a top-down view tiled map in canvas, where player is always in the middle of the screen, and map scrolls depending on where you go, like in moba games. I also want it to loop infinitely in ...
1
vote
2answers
34 views

Updating code to include states

The Problem I am having a problem in that I am finding it hard to understand how to update my current code so that it uses states. I am creating a game, the game has a menu, each page in the game ...
1
vote
1answer
54 views

Simulating elastic ball collisions quickly escalates to disaster

I'm trying to learn HTML canvas and was working on a basic physical simulation, where a number of balls are drawn and set in motion, and the program simulates them colliding and bouncing off the walls ...
3
votes
1answer
59 views

SDD Inverse Kinematics with constraints

I have a question regarding my quest on onderstanding IK solvers. After viewing this movie on YouTube: https://www.youtube.com/watch?v=MvuO9ZHGr6k I started recreating it with JavaScript. Just 2d on ...
1
vote
0answers
74 views

Pixel by pixel collision detection pinball

I'm currently working on a Pinball game using the HTML5 Canvas and JavaScript. Right now I'm getting a hard time with the pixel by pixel collision, which is fundamental because of the flippers. Right ...
2
votes
5answers
2k views

Are there any good html 5 mmo design tutorials? [closed]

Hey all. I got a rather inspired after playing gaia online's zOMG and wanted to revive an old project idea I've had laying around for a few years now. I'm looking to work with html5 (ie canvas, svg ...
1
vote
2answers
50 views

Cannot overlay text?

I'm trying to make text have a fixed position in world space and be overlayed in screen space at the same time. I have text in canvas with "Screen Space - Overlay" which covers my text located in ...
1
vote
2answers
93 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
0answers
33 views

How to fix my physics functions so they perform at the same speed across different FPS's

My jump function looks like - self.jump = function(){ //do the initial jump if (self.pressingUp && self.onGround) { //this just gets it off the ...
0
votes
1answer
26 views

Canvas/Paint Mechanic

I am currently working on an idea for a unity game app with a canvas mechanic. I understand I may have to use particles for the brush/paint f/x however I can not think of a way to add collision ...
0
votes
0answers
10 views

Clicking an entity with transformation

I am trying to understand how best to implement a click detection function in a 2d JavaScript game. I can demonstrate using a simple example of two square 'entities' which can be selected when ...
0
votes
2answers
95 views

How to improve my graphics on HTML5 canvas?

I am making my own army fighting simulator. Designer have made an 3D model with Blender and textured it, made animations. I have made sprites from that model and did programming. But the result is not ...
0
votes
1answer
52 views

Unity3d multiplayer canvas

so I am making multiplayer game and I stuck on one thing, I have blood overlay canvas in my scene(you know, in fps games if somebody shoots you your screen becomes red and this stuff), and when I ...
0
votes
0answers
14 views

Move ball through a direction angle in android canvas [duplicate]

I am building a simple game in android. I am successful in first step where I draw a ball in canvas in touch point. Now I am trying to move it from an initial point A (center) through the touch point ...
0
votes
1answer
427 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
42 views

How to display a lot of small objects using WebGL?

Introduction The game scene contains a lot of 10x10 pixel elements: for 1980x1200 px. screen the number of elements on the scene can vary from 0 to 23760 (elements cannot intersect). The live ...
0
votes
0answers
42 views

Chrome Canvas bug on Mac OS X when switching spaces?

I have a simple Breakout clone created using the <canvas> element and the 2d context. Whilst playing the game in Google Chrome (version: 49.0.2623.87 (64-bit)) if I switch spaces within Mac OS ...
0
votes
0answers
85 views

Using canvas graphics instead of traditional sprites in phaser

I'm trying to learn Phaser (total beginner with mild JS experience) and I'm following tutorials and such where everything is using sprites. I'm trying to get by with basic canvas shapes instead of ...
0
votes
2answers
187 views

How can I move an object around a canvas in a random direction at random times?

I am currently trying to move an object (circle ball) around the canvas in a random direction. I have already written the code for the wall collisions so the ball bounces back into canvas when the ...
1
vote
1answer
81 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
3answers
1k 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 ...
0
votes
1answer
15 views

Mousedown event not performing drawImage

I've been working on the basic gameplay. I'm to a point where I think it should draw a card in the quadrant clicked/tapped, but nothing is happening. I can't see what's wrong. Please help. My only ...
0
votes
1answer
46 views

Why are my canvas drawings larger than the actual image?

For the following page source, I've finally gotten a grip on rendering the cards. I'm puzzled why they appear about 2.5x larger on the canvas. <html> <head> <style> ...
0
votes
1answer
32 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 ...
1
vote
0answers
79 views

Drawing a hexgrid on a canvas, yet making it zoom/scrollable?

I'm developing a game in JS / PHP. The game is basically a 2D plane (hexgrid) where each hex represents a location in space. In total, I'm drawing 25 * 25 hexes on a 1000x1000 canvas. I also draw ...
0
votes
1answer
3k 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 ...
1
vote
1answer
31 views

how to follow(center) a box inside canvas element

If inside a canvas I draw a box, and the I add arrows to move it, the box will eventually be out of my reach since it goes out the border and I cant see it. How could I follow the box so that it is ...
7
votes
5answers
15k views

Huge performance difference when using drawImage with IMG vs CANVAS

I put together a couple of simple tests that render an image to a canvas. One renders from an IMG, while the other renders from an offscreen CANVAS. You can see the code and results here: http://...
4
votes
1answer
117 views

Fixed Time Step Flutter

I've seen a lot of questions about this problem, but really no solution. Hopefully I can explain the issue well enough that I can get some sort of closure on this problem. I'm using a Fixed Time ...
4
votes
2answers
12k 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 ...
5
votes
2answers
124 views

Create.js CPU High load

I'm new in Create.js and I'm trying to make countdown progress bar. I have this simple code: var stage = new createjs.Stage("timerCanvas"); stage.canvas.width = document.getElementById('...
0
votes
0answers
70 views

How to get the angle an object is travelling at

I'm trying to figure out how to get the angle an object is moving at, but have ran into a few problems. My player object is moved by rotating the entity left and right by using the left and right ...
3
votes
0answers
66 views

Check if a point is touching a user drawn curve in HTML5 canvas

I am having trouble detecting whether a ball is colliding with a red curve. The curve below is an example of what a user may draw on to the canvas. I can't think of any fast ways to detect collision ...
1
vote
1answer
54 views

Javascript canvas check if all recs on the screen overlap a new one

So I know the AABB collision detection formula, however, this code does not work. Whenever I press space, a new square pops up. But this new square can spawn inside another, something that I do not ...
1
vote
0answers
49 views

Facebook Canvas (web) Game for Desktop & Mobile Browsers

as the title suggests - I am about to develop a game for FB canvas. Will the game support mobile and desktop or do I have to create two different project/game setups for this? thanks
1
vote
1answer
145 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
1answer
339 views

Android canvas.drawColor throws a null object reference

I have two nearly identical methods, the first to draw a splash screen while assets are loading, and the second to draw all of the assets to the screen. The first throws a NullPointerException on ...
6
votes
4answers
406 views

Rotating sprite around another sprite

I am building a pool game, and I want to make the cue rotate around the white ball. Here is the live code: http://199.26.84.223/nocol.html Here is the code for the white ball: balls = game.add....