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
0 votes
1 answer
55 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 ...
user avatar
0 votes
1 answer
27 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 ...
user avatar
  • 11
0 votes
1 answer
43 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 ...
user avatar
  • 3
1 vote
0 answers
98 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 ...
user avatar
0 votes
1 answer
50 views

Trouble using delta in my movement function

...
user avatar
0 votes
1 answer
222 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
user avatar
0 votes
0 answers
54 views

How to make sure that I get the same result in a multiplayer game if the server is not authoritative?

I am making a simple 2 player browser game, where there's a rotating entity which jumps from one square to another on mouse click. Server is on NodeJS. To determine which square to jump into, I used ...
user avatar
  • 15
0 votes
1 answer
399 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: ...
user avatar
0 votes
1 answer
24 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 ...
user avatar
1 vote
0 answers
13 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 ...
user avatar
1 vote
1 answer
382 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 ...
user avatar
1 vote
1 answer
58 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 ...
user avatar
1 vote
2 answers
592 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 ...
user avatar
1 vote
1 answer
458 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 ...
user avatar
  • 113
0 votes
1 answer
27 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 ...
user avatar
  • 3
0 votes
1 answer
92 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'...
user avatar
  • 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 ...
user avatar
5 votes
1 answer
2k 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 ...
user avatar
1 vote
1 answer
375 views

My HTML Canvas went blank

I tried to draw Mario Sprites in my HTML Canvas, but it always went blank. Anybody knows why? ...
user avatar
0 votes
1 answer
38 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??? ...
user avatar
2 votes
2 answers
2k 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? <...
user avatar
0 votes
2 answers
427 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: ...
user avatar
0 votes
1 answer
190 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: <...
user avatar
  • 105
0 votes
0 answers
377 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....
user avatar
  • 1
0 votes
0 answers
32 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 ...
user avatar
0 votes
1 answer
106 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 ...
user avatar
0 votes
1 answer
1k views

I'm trying to work with setInterval inside a loop and it doesn't work the i want it to

I am making a 2d canvas game in Javascript. I am trying to make the enemies that are coming to my hero to shoot a bullet every 3 seconds. ...
user avatar
0 votes
1 answer
208 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 ...
user avatar
0 votes
1 answer
396 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 (...
user avatar
-1 votes
1 answer
300 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> ...
user avatar
  • 103
1 vote
0 answers
52 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. ...
user avatar
0 votes
2 answers
71 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. ...
user avatar
-1 votes
2 answers
124 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 ...
user avatar
1 vote
1 answer
175 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 ...
user avatar
0 votes
1 answer
244 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 ...
user avatar
1 vote
1 answer
27 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 ...
user avatar
  • 151
1 vote
2 answers
112 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: ...
user avatar
  • 11
0 votes
2 answers
667 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 ...
user avatar
  • 193
3 votes
1 answer
518 views

How do I rotate individual shapes on an html5 canvas?

So I am doing a basic Asteroids clone as an intro to HTML5 canvas. I want to be able to rotate the main player while leaving the other objects on screen alone. Currently I am using transform and ...
user avatar
  • 193
0 votes
0 answers
129 views

Using dom elements for game interaction - slow performance

I have a need for my html5 game (using melonjs) to allow users to click tile areas on the map. The idea is it will show a css styled hover area. The browser tested is chrome. I could do this natively ...
user avatar
  • 1,035
1 vote
1 answer
854 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 ...
user avatar
  • 151
2 votes
1 answer
171 views

Click on an isometric plane and obtain normal coordinates

I have photos distributed as cells. When I click, I get the corresponding row and column. console.log("Col:" + X + "Row:" + Y); When applying an isometric view conversion like this: ctx.translate(0, ...
user avatar
  • 41
1 vote
0 answers
166 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 ...
user avatar
1 vote
1 answer
868 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'...
user avatar
1 vote
1 answer
120 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 ...
user avatar
  • 11
2 votes
1 answer
231 views

Issues with AABB on a platformer game

i'm facing an issue at the moment in my javascript/html platformer game that despite searching for this issue i can't solve. The problem is this: When i place two platforms next to each other and the ...
user avatar
0 votes
2 answers
72 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 ...
user avatar
  • 151
0 votes
1 answer
125 views

Can a .exe file ported from a program like NW.js or Electron be put console stores?

I'm early in development working on a game in HTML5/JavaScript canvas, and I wondering if porting the game with some HTML/JS to .EXE converter would allowed it to be posted on consoles? I think it ...
user avatar
1 vote
1 answer
118 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 ...
user avatar
1 vote
1 answer
69 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*...
user avatar

1
2 3 4 5
8