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
0answers
247 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
170 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. ...
4
votes
1answer
694 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
629 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
34 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
49 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
124 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
103 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: ...
2
votes
2answers
1k 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
44 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
25 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
80 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: ...
0
votes
1answer
361 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
15 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
2answers
86 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 ...
3
votes
2answers
693 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
588 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
8k 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
806 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
505 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
1answer
67 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
620 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 ...
2
votes
0answers
459 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
525 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
60 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
1answer
173 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
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
511 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
151 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
5k 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 ...
3
votes
0answers
126 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
21 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
87 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
199 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 ...
1
vote
1answer
229 views

How to blend the surface with HTML5 canvas?

I can simply blend the surface in GameMaker using these codes: ...
0
votes
1answer
33 views

How to change the color of an image when getting points

Currently I have a car game which I give points when a car touches the monster.Now extra to that I also wanted to change the color of the car or replace the car image with a different color car image ...
0
votes
1answer
117 views

How to turn the car when pressing left or right key

I am new to canvas and developing a game where a car moves straight and now I want to turn the car to anti clockwise when the left key is pressed and clockwise when right key is pressed. Currently I ...
1
vote
1answer
619 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
249 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 ...
0
votes
0answers
67 views

Choosing a data structure for a group of static (almost) thousands of objects on HTML5 canvas

I have this requirement to implement a data structure for a group of thousands of displayable objects, on HTML5 canvas. Something like a particle system. The objects are randomly spread on the map. ...
0
votes
0answers
379 views

Adding multiple animated sprites on canvas make the game FPS drop sharply

I am using PIXI.js to build a html5 canvas game. Although this is PIXI.js specific question I think this may happen very often in HTML5 canvas games. I have placed hundreds of static sprites in my ...
0
votes
1answer
5k views

How can I scale/zoom to a point in canvas in the game?

I am using html5 canvas to build a MMO game. When I scale my background by default it scales to (0, 0) which is the top left corner of the background. If I have ...
1
vote
3answers
695 views

Is it alright to have hundreds of canvas object on screen?

I am using html5 to build a game and it is based on Canvas not webGL. I am trying to build sprites from canvas object not from images. Because there will be many sprites on the screen and each of them ...
2
votes
2answers
6k views

javascript game camera that follows my player

I am experimenting with game developement here but my player disapears my player is alowed to just walk of the screen and never be seen again so i was wondering if someone could help me with adding a ...
1
vote
2answers
366 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
907 views

Javascript game engine that can work 'seamlessly' with react-native [closed]

I have experience with Unity, but I don't like the fact that Unity compiles your game directly into APK (or IOS equivalent). I want to modify the game to provide chat interface for multiplayer mode ...
1
vote
1answer
84 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
votes
1answer
665 views

How to connect circle nodes using arrows?

I'm trying to design a simple game where a series of numbered circles can be connected by arrows (like mobile phone pattern locks). I have these circles designed here: https://jsfiddle.net/sarmadm/...
1
vote
1answer
1k views

Camera movement, Draw grid

If I have a 20x10 grid (640x320) where tiles are 32x32 The grid are rendered: ...
0
votes
1answer
223 views

Perlin noise terrain issue when scrolling

I am generating a terrain in Javascript canvas using this js project for the Perlin noise. I have an array of points, and when one point leaves the left-hand-side of the window, it is removed, and a ...

1
2
3 4 5
8