Questions tagged [html-canvas]
A new feature of HTML5, allowing Javascript apps to have a drawing surface in the browser.
392
questions
0
votes
0
answers
13
views
Game character in the browser game appears on Android, but not on iOS
I have a problem with rendering the game on mobile platforms (the game is written on the Impact.js), the problem is only with the iOS actually, the screenshot below shows that the characters are ...
- 13
1
vote
1
answer
149
views
Would it be possible to make a Game Genie like program in Javascript?
Game Genie was a tool for the NES that allowed users to input codes that were able to drastically able to change the mechanics of a game by getting CPU reads and replacing the game's response with its ...
- 123
0
votes
0
answers
40
views
Handle roads following in a javascript game
In a browser game made in HTML5/Javascript, I would like to handle the move of units in real-time. But units would have to follow some predefined roads...
Canvas seems better than svg to handle ...
0
votes
2
answers
69
views
What is the best way to store level data in HTML5
I am currently making a game in HTML5 using canvas, and it is currently just 1 js script and HTML file with references to png files for assets. Right now, I have the level data baked into the script, ...
- 23
0
votes
0
answers
55
views
Unity WebGL Game's Canvas UI scale changes with windows scale
So this is the setting that is affecting my game. My game is a webgl build from unity running in chrome, hosted on itch.io.
At 100% windows scaling setting, the UI elements have expected size,...
0
votes
1
answer
43
views
Adding requestAnimationFrame in isometric Tile grid Code is not working
Hi There this is my first Post on gamedev, and i hope everyone understand what i want :)
First of all my Code is an very Personal Version from one Github Isometric Map.
I Tryd now 2 Days to Add the ...
0
votes
1
answer
32
views
Why is this code keeping the listener which should be removed instead?
I am having some issues figuring out why this code still lets btn_1 call the function setstate3().
There is a function ...
0
votes
1
answer
15
views
why does my button lose the changed cursor and mouseover behaviour as soon as I attach a class to my file?
Using adobe animate cc - exporting to HTML5 and coding in JS (or at least trying to)
If I just hit cntrl+enter in adobe animate the button works as expected.
If I run the app from a web server using ...
0
votes
0
answers
61
views
How can I seamlessly loop a video (webm since it has transparencies) in javascript canvas?
I am trying to play a video from beginning to 10 seconds, then loop the video from second 3 to 10 untill a key "c" is pressed. if it is pressed once, play the video from where it is ...
- 11
0
votes
1
answer
542
views
How to fit game to screen size?
I create a WebGL game. After building project I discovered that the game doesn't fit the screen size
How you can see the canvas is perfectly scaled but the game didn't
I don't know what I changed but ...
- 153
0
votes
1
answer
330
views
How to pan and zoom an isometric map on a canvas
I'm new to html canvas.
So far I am following this code as base for simple isometric tiles.
I made an empty isometric grid map that only shows the grid.
I want to offset the position of my isometric ...
- 101
0
votes
1
answer
111
views
How to spread circles evenly around a point?
In my game there's a part where a bunch of circles need to evenly spread around a point. Like in this demo below:
...
- 215
0
votes
1
answer
153
views
Invisible sprites with requestAnimationFrame
I'm trying to animate a sprite sheet. I have a single image, and multiple objects of the same type but drawn at different locations on the canvas.
What I'm trying to do is have each object move with ...
0
votes
1
answer
59
views
How do I go about creating images, which are units with traits?
Lets say there are 5 units, displayed as images on an html5-canvas.
Each image (unit) has a different size. For the game I need to know the size of that unit, and also it's middle point.
How and where ...
- 1
0
votes
1
answer
227
views
Struggling with breadth first search for hex grid
I cant seem to get breadth first search right. Ive gone through redblobs implementation guides of hex grids and have that all figured out but pathfinding is proving to be difficult.
So I have a search ...
- 103
0
votes
1
answer
75
views
How to add a texture that follows the movement?
I would like to move my landscape to simulate a world moving on the x-axis. I use createPattern() to add an image inside my path, but the pattern draws the image at ...
- 11
0
votes
1
answer
256
views
Alternative to redrawing the background canvas for camera movements?
I have multiple canvases placed on top of each other for different layers (background, game objects, foreground). I was expecting this to allow me to have the background and foreground update at a ...
- 3
3
votes
0
answers
581
views
What is causing my touchstart event to end while I'm still touching the screen, and how can I fix that?
What I'm trying to do:
I'm trying to add touch controls to games created with the html canvas and JavaScript so that they can be used on mobile / tablet devices.
The controls should simply move a ...
- 41
0
votes
1
answer
344
views
0
votes
1
answer
1k
views
find one meter to scale in earth heightmap
I have a heightmap that scales from 0 to 255. the map is only for elevation (discluding water and ice) what would be the appropriate way to calculate the scale of one meter? heightmap below
0
votes
1
answer
906
views
How to rotate an image around its center point in a JavaScript canvas?
I have this function to get the rotation angle from my sprite and a target:
...
- 169
0
votes
1
answer
51
views
using javascript canvas.context.scale resets custom font
I am making a HTML5 game using javascript with canvas.
I am implementing a custom font adding @font-face style tag to header in the .html file, then if I set ...
- 169
1
vote
0
answers
23
views
How can I calculate initial X and Y velocity given the starting coordinates, target coordinates, friction and duration? (No gravity)
I am really new to mixing physics and game development, and I would like to find the initial velocity required to launch the gray dot from point A to point B, given a time. I’ve tried many tutorials ...
- 11
1
vote
1
answer
959
views
Help me Make Sense of Unity 2D Resolution Management
I am trying to set up an environment for a retro style pixel art game in Unity 2D. I aim for a vertical resolution of 240 pixels, and then, I would like the horizontal resolution to be dependent on ...
- 115
1
vote
1
answer
77
views
How to add zombie arms to enemies in HTML canvas
I'm making a game with HTML canvas (not WEBGL). I have zombies that go to the center of the screen, but for now they are just circles. I want to give them two arms, like the arms players have in ...
- 113
2
votes
2
answers
1k
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 ...
- 215
1
vote
2
answers
1k
views
How to make 2D lighting in JavaScript
I am making a recreation of the 2D voxel game Terraria in JavaScript. Like most sandbox games, Terraria has lighting, but because I am using JavaScript, performance is going to be an issue.
I have ...
- 113
0
votes
1
answer
33
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
1
answer
109
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'...
- 103
2
votes
3
answers
2k
views
What is the "Unity" way to approach tech design for a 2D game like this?
So I come from C++ land where I've always done every little thing myself. Now I'm getting into Unity and C# and I'm ironically overwhelmed with the domain. I'm starting off with this simple little 2D ...
- 129
7
votes
1
answer
3k
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
1
answer
738
views
My HTML Canvas went blank
I tried to draw Mario Sprites in my HTML Canvas, but it always went blank.
Anybody knows why?
...
- 31
0
votes
1
answer
226
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???
...
- 31
2
votes
2
answers
3k
views
My HTML canvas keep flickering
I'm trying to create a game in HTML canvas, but somehow it keeps flickering, I've taken a look at the tutorial and I perceived that my code is more or less similar. Can anybody help me fix this?
<...
- 31
0
votes
2
answers
752
views
World space UI stretched too much instead of billboard in unity
I am scaling my world space UI element as my camera go far away from UI using this code snippet:
...
- 1,970
0
votes
1
answer
292
views
how to join the body of snake in 2D snake game
i'm making a snake game in javaScript from scratch. The problem is that the snake looks disjoint(see image). How can I connect the body(rectangles) of the snake?
here is the code of drawing snake:
<...
- 105
0
votes
0
answers
752
views
html5 canvas isometric tile map
i need a help i have an Isometric Staggered tile map in Tiled (mapeditor.org).
100x100 tiles, 94x54px, 9447x2727px. total.
How can i make this in html5 canvas ?
var context = document....
- 1
0
votes
0
answers
35
views
Platformer collision detection problem - player snapping onto sides [duplicate]
I am having problems with collision detection. I am trying to make a simple platformer but when the player is falling or moving too fast it sometimes detects the wrong collision side. I am getting the ...
- 69
0
votes
1
answer
165
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 ...
-1
votes
1
answer
2k
views
Calling setInterval from requestAnimationFrame causes enemies to shoot continuously
I am making a 2D canvas game in JavaScript. I am trying to make the enemies shoot a bullet every 3 seconds.
...
0
votes
1
answer
430
views
Making an enemy shoot every few seconds
so I am making a 2d canvas game in Javascript and I want the enemy mobs to shoot a bullet every let's say 3 seconds. I'm almost done with the code , i made everything i just don't know how to make the ...
0
votes
1
answer
603
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 (...
-1
votes
1
answer
445
views
WebGL-HTML5 canvas in two blogger blog posts show individually but not together?
In my blogger blog: https://cglabprojects.blogspot.com
I have a newer blog post with
<canvas width = "570" height = "570" id = "my_Canvas1"></canvas>
...
- 103
1
vote
0
answers
61
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. ...
- 11
0
votes
2
answers
77
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. ...
-1
votes
2
answers
317
views
I need help with calculating the angle my character is aiming at
So im doing this program where i want my hero to shoot to the direction its facing , but for this job to get done i need to calculate the angle my hero is facing with Math.atan2() , atleasts thats ...
1
vote
1
answer
301
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 ...
0
votes
1
answer
398
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 ...
1
vote
1
answer
30
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 ...
- 151
1
vote
2
answers
128
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:
...
- 11