Stack Exchange Network

Stack Exchange network consists of 175 Q&A communities including Stack Overflow, the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Visit Stack Exchange

Questions tagged [html-canvas]

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

0
votes
1answer
32 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 ...
1
vote
1answer
70 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
36 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*...
2
votes
0answers
78 views

How to port an html5 canvas game to sell on PC / Console?

I am trying to make a 2D platformer, but I want to use html5 canvas since I find it much easier to create 2D games with it than with Unity. I am wondering if there is some way I can bundle my game so ...
0
votes
1answer
36 views

Canvas Infinite Map: How to have reappearing objects at static X,Y even when looping

I made a html canvas example of an infinite scrolling map with objects in static places. As you can see in the Fiddle below, when you move left with the Arrow Keys, you can see that the map does not ...
0
votes
1answer
99 views

How to use arrow keys to navigate between cells in a crossword puzzle

I am making a crossword puzzle, using a canvas. How do you get the keyboard arrows to interact with the screen so that when the user presses any of the arrow keys, the cursor will advance to the next ...
2
votes
1answer
80 views

Why are my animations flickering?

My animation is supposed to be used in my physics project I am making. I am using 10 millisecond setInterval() and setTimeout() ...
0
votes
1answer
104 views

Canvas HTML5 Top View -> Isometric

We are working in a simple MP strategy game using Node, Express and Sockets! I'm wondering if there's an easy approach to a transformation to make a Top View game into a 3D Isometric, without adding a ...
1
vote
3answers
102 views

Splice enemy array to destroy enemy (js game)

I am currently working on a basic space invaders game. So far I have created the enemies, a main character, and a laser beam, collision detection between enemy and bullet, however when my bullet ...
1
vote
3answers
91 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
39 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
95 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
87 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
1answer
267 views

HTML5 Canvas - Drawing with Floats

I'm trying to implement a game where you have car moving along a line in HTML5 Canvas. Using a little bit of trigonometrie I managed to get the right x and y coordinates to add to the coordinates of ...
0
votes
1answer
185 views

Character collision detection on 2D array tileset based map

I have a very basic collision detection working, but not quite there yet. Now as I understand I'm only checking against the left top corner of the character for collision detection. And it only works ...
1
vote
1answer
28 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
0answers
28 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 ...
0
votes
1answer
60 views

How to get character position in 2D map array by its position on canvas

My arrayMap consists of 0, 1 and 2. 0 is water and character is allowed to be on. 1 and 2 are ground and the collision should happen. To get and check what array number the character is standing on, ...
2
votes
1answer
98 views

Array of map data renders the map the opposite way

A while ago by following some tutorials I made a game map array consisting of 0, 1 and 2. I program it the way I want to see it: ...
0
votes
0answers
116 views

How to do proper collision detection on a tilemap array?

I want to implement a simple collision detection so that when my character hits one of the objects it can't move any further. I have seen some tutorials on collision but the thing is that they are ...
1
vote
2answers
144 views

HTML canvas how to create big game world and show only a part of it on canvas?

I originally created this question at stackoverflow but got no answers, so hopefully someone will be able to help me here. So for the first time ever I'm making a html canvas game. So far I came up ...
0
votes
1answer
31 views

Extract formula from vector drawing

I am creating a game with HTML5 canvas for browser. I want to create animations with many shapes, which would be drawed with canvas, not from spritesheets. The problem i face now is - to create ...
0
votes
1answer
22 views

My sprite is not listening to any keyboard keys

First time ever creating html canvas game. Once I finally got my sprite ant tiles drawn on the canvas, now I want to make my sprite interactive. Unfortunately, for some reason it is not working. I get ...
0
votes
1answer
52 views

Why my canvas isn't showing anything after I put code in the loop for tile map?

My canvas stop showing anything when I want to display a tile 25 times. No errors. Here is the code: ...
1
vote
1answer
163 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
vote
0answers
10 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 ...
2
votes
2answers
83 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 ...
2
votes
2answers
258 views

How do I handle player collision with corners of a wall

I have implemented some basic wall collisions where I project the velocity vector onto the wall the player is colliding with so they slide across the wall. The problem I am having is when you slide ...
0
votes
1answer
241 views

How does the double-buffered canvas know when to swap the buffer?

How does the HTML5 canvas know that all the drawing operations are complete and it's time to swap the buffer ? Program can have multiple draw calls at different places so how will it know when is the ...
0
votes
3answers
2k views

JavaScript canvas remove image

I'm writing a platformer and I want to implement own art, now I know how to display it and this isn't my question. It rather is how do I remove it? I tried drawing a rectangle over it and removing it, ...
3
votes
1answer
291 views

Lighting in 2d isometric games

I want to add lighting to an isometric game that I'm working on. The closest I've come so far is to do a pass over the blocks on the floor and build up a light intensity matrix (based on how far each ...
0
votes
1answer
140 views

Mobile screen resolution and canvas size

I'm making a HTML5 game using the canvas. I was building it for my iPhone 6 which state a resolution of 1334x750 pixels but also a resolution of 667x375 points. I notice that my canvas need to match ...
0
votes
0answers
49 views

HTML5 Canvas drawing a line & colliding with it

I'm somewhat new to building games using the Canvas without any framework wrapped around. For my current project I try to build a snake like game where you can turn left and right (you always move ...
0
votes
1answer
58 views

DOM for GUI - display animated objects

I'm creating an HTML5 game using Canvas, but want to use DOM for the GUI for the reasons mentioned in there articles: http://blog.sklambert.com/html5-game-tutorial-game-ui-canvas-vs-dom/ http://www....
0
votes
1answer
365 views

HTML5 Canvas non-geometric edge trace for collision detection

I had a question about how to do edge tracing for use in collision detection for a game - think 'Asteroids'. I couldn't frame the question clearly so I did some R&D. The question I had in mind was ...
0
votes
0answers
95 views

How to fill color in tile using phaser?

I want to fill the color in specific tile. The method available in phaser is putTile(), But I want to fill any color I want. In canvas there is method called fillrect(). Please suggest me some ...
2
votes
0answers
255 views

Persistent realtime game authentication (JWT, Passport)

Context I am building a MMO game in HTML5 with canvas. I use NodeJS on server & JS from scratch on client. I also use socket.io to manage realtime. The game is persistent & each player keep ...
3
votes
1answer
212 views

DrawImage problem adjacent sprite?

Context I'm building a 2D game from scratch in JS. I'm drawing the map by using rpgmxp tilesets for the moment just to have some resources : Each tile is 32*32 pixels. I'm using canvas API with <...
0
votes
2answers
47 views

Limiting Framerate and Input

So I have been learning HTML5 canvas recently and ran into a bit of a snag. I created a proof of concept that builds a block based 2d map that you can move a character inside of using arrow keys. This ...
0
votes
0answers
14 views

User experience on mobile for Canvas set to HD rsolution

i got about 25 years of software dev experience on my shoulders but i am just getting my feet wet about game development. i got few pre-made game engines from a market place and i am enhancing the ...
0
votes
1answer
109 views

Most efficient way to detect and act upon collision (Specific for my 2d game)

Currently, mainly just for fun, I'm working on a 2d game where I have all collide-able blocks (background) assorted into an array when its loading, along with the player put into a different part of ...
1
vote
0answers
47 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
207 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 ...
0
votes
1answer
107 views

A logic error. canvas: balls physics, bounce

Hi I was making a program that simulate a bunch of balls bouncing, but the problem is some balls got stuck to the floor. Since it's a logic error, it is kind of difficult to find. Can someone help, I ...
1
vote
1answer
2k 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 ...
2
votes
0answers
101 views

Optimising my Node.js/Js/Socket shooter game

So here I made a little shooter game just to play around with and on my pc it runs fine but for people with worse internet/less powerful computers (e.g at school/few friends of mine) it is quite laggy ...
0
votes
1answer
17 views

How to make the image move forward properly when rotated in my HTML5 game?

I am just trying to make a simple 2D racing game using canvas. It uses the W,S,A, D keys to move the car. The W key should take me forward and the A and D keys will turn each way. I want the car to ...
1
vote
1answer
64 views
0
votes
0answers
394 views

How to make the car move in my path in canvas

I have developed a game where currently I move a car towards a human in a diagonal path.Now I wanted the car to follow a route.So I followed some tutorials on pathfinding.So my initial step is to ...
1
vote
1answer
133 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 ...