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
4k views

Clearing just the object, not the whole canvas, leaving an uwanted trail

I'm working on a platform game via poo. I heard is more efficient to clear just the object you're drawing instead of clearing the whole canvas. So I'm working on this, and all goes well when the ...
1
vote
1answer
85 views

Checking if bullet collides with enemy when I know the start X & Y, the angle, the speed and dist traveled of the bullets

This is the bullet I create when a player clicks to attack ...
1
vote
1answer
221 views

How to blend the surface with HTML5 canvas?

I can simply blend the surface in GameMaker using these codes: ...
1
vote
1answer
562 views

Throw ball - distance and force

I have a question, I need a formula to calculate the distance and a force based on the speed that drags the finger up on the phone. And is there any way I can get a look? And also shows the trajectory ...
1
vote
2answers
232 views

Keep balls in the box and prevent intersection

I'm coding a one-dimentional elastic collision animation (demo) with balls. I've used fixed position values when testing and now I want to use random values. The problem with random values is that ...
1
vote
2answers
338 views

How can I increase framerate, when drawing tiles to a HTML canvas?

I am using the HTML 5 canvas to make a simple platformer game. I am currently drawing the tiles using a for loop that runs through a list of tiles and checks if ...
1
vote
1answer
76 views

Rotated canvas sprite not drawing properly

First, sorry for my english. Said that: Recently I began to study JavaScript and like a way to consolidate what I learned I decided to make a simple video game with canvas and javascript: kind of ...
1
vote
1answer
112 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
1answer
4k 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 ...
1
vote
1answer
1k views

Building a simple bomberman game with Node.js and Socket.io [closed]

I'm building this game mostly because I want to experiment with Node.js and Socket.io, and the game is more like a proof of concept. To start with, I have a 2D grid system as the game map. ...
1
vote
1answer
975 views

Cocos2D-JS Windows App in fullscreen mode (Win32)

I've been looking for a way to make my Cocos2D-JS app go into fullscreen mode, but there doesn't seem to be much documentation on Cocos2D-JS (or Cocos2D-x-js as some seem to call it.) This app is to ...
1
vote
4answers
1k 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 ...
1
vote
2answers
363 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 ...
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 ...
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 (...
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-...
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
7k 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
266 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 ...
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: ...
1
vote
2answers
3k 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. Also,...
1
vote
2answers
3k views

Is it possible to convert file from Blender 3d to svg?

I want to build web game in html5 with canvas/svg. Can I convert/export file from blender to canvas/svg? Maybe via unity3d?
1
vote
1answer
300 views

Isometric Optimization in javascript

I'm having some issues with my optimization of my game. I have a simple tile map looped like this in my case the images are 64 by 64 pixels: ...
1
vote
1answer
2k views

Android-Handling screen clicks for dynamically moving objects in a view

I have a kind of broad question to ask but I have to start some where so.....What is the best way to handle onscreen clicks for moving objects being drawn on a canvas in a view. Im registering the ...
1
vote
0answers
45 views

Problem with collisions detection on canvas platformer

Having a lot of trouble with my collision detection in my platformer. If you go straight to the right the block will float. Also the corners let the block sink right through and the walls are sticky. ...
1
vote
2answers
87 views

Select Neighboring X or Y Tiles

I have a randomly generated set of tiles, and I am trying to select neighboring x or y tiles to perform functions on them based on if they are a certain value of tile, like so: ...
1
vote
1answer
480 views

How to rotate player to face mouse on canvas?

I'm building a basic game using plain javascript and I am trying to rotate my object to follow my mouse. I've tried getting the client's mouse X and Y then subtracting the canvas width and height ...
1
vote
0answers
99 views

Junk movement with steady 60fps on Web canvas

I'm new to building games on canvas, and I'm trying to create one. But I encountered a problem with sprite movements. My sprites move is smooth, but sometimes it starts to "jump". FPS is stable 60 ...
1
vote
1answer
133 views

My Canvas has an image which I am using for my background but it is blocking my Camera from seeing my Game Scene

So I am not entirely sure how to explain this as I have not had any luck searching online and I'm sure this is a simple problem but I'm being stupid and can't see it. I have a Canvas which is for my ...
1
vote
0answers
212 views

Converting 2d cartesian coordinate-based map editor to rendering isometric view

I have been working on a 2d html5 canvas map editor. It is tile based, and originally it was just a top-down view on a grid of tiles (or empty spaces). I decided I wanted to convert it to render the ...
1
vote
0answers
151 views

Performance problems with scrolling html5 canvas for large tile-based game

I try programming a splix.io clone as an electron app and do the visualization via the html5 canvas. The movement across the tiles should look fluent like the original, so I target 60 frames a second. ...
1
vote
0answers
42 views

How to fix html canvas sprite trail when moving to the right side

I have moving background on character movemet. When I move to the sides, I get stacked images, so I found out that I need to clearRect every time to avoid this. But clearing canvas leaves me with ...
1
vote
0answers
13 views

How do I fix these touch events? Events respond if there are 2 fingers but not 1

I am making a simple game of mine mobile-friendly. The goal is to: Make character walk if a touchstart event is sensed on right half of screen. Stop character if a touchend event is sensed on the ...
1
vote
0answers
56 views

Implementing navigatable achievement menu in javascript

I am in the process of learning javascript for game design, and wanted to make a separate achievement page that the user can navigate to that will allow them to check their achievements on various ...
1
vote
0answers
440 views

How to flip sprites with different dimensions horizontally?

I am trying to make an animation on HTML5 Canvas with this texture atlas, which was packed by TexturePacker: and it works good when the Character is facing right. I try to flip it horizontally, but ...
1
vote
0answers
822 views

Creating an Isometric tile map with HTML5

I'm trying to create an isometric tile map using HTML5 Canvas. Everything I've found online points me towards using a pre-built engine. I'd like to learn how to do this without using an engine. Is ...
1
vote
0answers
1k 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 ...
1
vote
1answer
687 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 ...
1
vote
0answers
462 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 ...
1
vote
0answers
178 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
0answers
271 views

Donut-shaped / inverse mask in Phaser

I am trying to get a donut-shaped mask in Phaser (essentially the inverse of a regular mask). The mask shape is dynamic so it needs to be a Phaser.Graphics polygon object. Desired result: The blue ...
1
vote
1answer
319 views

svg spaceship game movement 2d

I've been searching for a way to make an svg box move to all directions using js. I have seen many tutorials on how to do it grid like, but I want it so have a square that can turn, move forward, ...
1
vote
1answer
404 views

Set a different animation rate for moving player NOT using a sprite

I am trying to start making a simple game using HTML5 with a canvas and some JS. I have a player whose movement I am comfortable with, but the rate at which the player animates when it moves is too ...
1
vote
0answers
94 views
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
2answers
1k 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 ...
1
vote
0answers
61 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 ...
1
vote
0answers
818 views

Drawing two orthogonal strings in 3d space in Android Canvas?

I want to draw two strings in canvas. The first string must be rotated around the Y axis, for example 45 degrees. The second string must start at the end of the first string and also it must be ...

1
4
5
6 7 8