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
2
votes
3answers
1k 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 ...
2
votes
2answers
11k views

Moving a sprite towards an x and y coordinate

Given a sprite with an x and y coordinate, how would I move it toward another sprite with an x and y coordinate? I've already made it face towards the other sprite, and I've made it move towards the ...
2
votes
2answers
769 views

Animating sprites at different speed than what the game runs at

I am building a Javascript/canvas platformer game, and it's coming along nicely. The only problem I've really run into where I can think of any solution at all is the animation of my player sprite. ...
2
votes
2answers
11k views

Rotate canvas along its center based on user touch - Android

I want to rotate the canvas circularly on its center axis based on user touch. i want to rotate based on center but its rotating based on top left corner . so i am able to see only 1/4 for rotation ...
2
votes
2answers
12k views

How to solve ArrayList outOfBoundsExeption?

I'm getting: ...
2
votes
3answers
3k views

Canvas setTransform function clarification

I'm currently building some kind of fake-3D dungeon, and I'm facing some difficulties understanding the behavior of the setTransform() function. Here's my simplified code: ...
2
votes
2answers
228 views

Testing HTML5 canvas games on low resource computers

I've made a game in HTML5 & JS and want to test it on varying types of user setups as I've heard it doesn't perform too well on older MacBooks. How can I accomplish this? I'm thinking of ...
2
votes
3answers
4k views

Map building - Tower Defense

Before diving too deep into my question, let it be known that I am learning as far as java script goes and figured a simple Tower Defense game would be an excellent way to learn things. So I have ...
2
votes
1answer
1k views

Do you need to make a tileset for a platformer?

I've been tasked to make a platformer, I've never made a tiled game before, is this necessary? I.e. can I just make different child classes of a Sprite class and add place them on the map, adding ...
2
votes
1answer
1k views

Low FPS on Java drawing in BufferStrategy

I ran into a very strange problem while using BufferStrategy, I've tried searching for an answer but all I have found are non-relevant threads and discussions. So here is my query. ...
2
votes
2answers
184 views

Deactivate keyboard input on collision

I'm creating an online-canvas-game with a tank as player object. Now I have several structures in my canvas, that shouldn't be able to be overdriven by the tank... My solution is to detect the ...
2
votes
1answer
674 views

How to display a lot of small objects using WebGL?

Introduction The game scene contains a lot of 10x10 pixel elements: for 1980x1200 px. screen the number of elements on the scene can vary from 0 to 23760 (elements cannot intersect). The live ...
2
votes
3answers
887 views

How do I correctly make character sprite direction match player inputs?

In my top down game I can move the character around and the character will even face the direction he is moving. However, there is some weird behavior I'm having: when you hold down one direction and ...
2
votes
1answer
280 views

Difference between rotation methods?

My question is in about rotate methods in android.graphics.Camera. In Docs, I saw these comments: public void rotateX (float ...
2
votes
2answers
1k views

Frustum Culling/Only rendering what's viewed by the Camera in HTML5 Canvas?

I coded up a simple 2D Camera for my HTML5 Canvas-Based Game Engine but I noticed the performance wasn't very good. So a lot of people suggested only rendering things that are shown by the camera but ...
2
votes
2answers
2k views

Drawing isometric map in canvas / javascript

I have a problem with my map design for my tiles. I set player position which is meant to be the middle tile that the canvas is looking at. How ever the calculation to put them in x:y pixel location ...
2
votes
1answer
123 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, ...
2
votes
2answers
758 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 ...
2
votes
1answer
2k views

2d Tile Movement and Camera

Let's imagine we have a 60x60 grid (where a Tile is 64x64px). Within the viewport there should be 10 tiles. The player object is 32x32px. To have smooth movement, I have to take delta time in ...
2
votes
1answer
432 views

Infinite space 2d map - how to implement in js

Im not exactly sure how to implement this in JS. So I want to have a 2d infinite map, but not tiled. The coordinates are there only so that if you are travelling around space you know in what ...
2
votes
3answers
438 views

Limit access to socket end point

I'm developing a multiplayer canvas game based on socket.io and box2d physics engine. Is there a way to limit connections to my socket endpoint and only allow connections from a specific domain? <...
2
votes
1answer
300 views

Simulating elastic ball collisions quickly escalates to disaster

I'm trying to learn HTML canvas and was working on a basic physical simulation, where a number of balls are drawn and set in motion, and the program simulates them colliding and bouncing off the walls ...
2
votes
1answer
350 views

Fastest way to render isometric world with moving entities?

I've got an isometric diamond-shaped world. The world consists of isometric planes like rooms. The walls and floors of the rooms and all obstacles and items in the rooms are isometric entities. So I ...
2
votes
1answer
289 views

Tiled - move all tiles

I'm making a map in Tiled. I quickly ran out of room in the north of my map and would like to "shift" the tiles down. I'd prefer not to have to redo each of the tile layers. Is this possible? This ...
2
votes
1answer
3k views

What is the difference between a Facebook Canvas and Facebook Web project?

I am making a game on cocos2d-JS for Facebook. What is the difference between Facebook Canvas & Facebook Web project. From what I can tell, Facebook Canvas ask for the secure url and Web ask for ...
2
votes
2answers
850 views

How to access bottom canvas layer in HTML?

I have such html: ...
2
votes
1answer
1k views

How do I use createPattern with a spritesheet? [closed]

Say that I have a spritesheet like this And I want to use the dirt tile at (1, 1). I know that I can repeat an entire image using createPattern but how do I create ...
2
votes
2answers
590 views

Glitch-free cross-fades in HTML5

In my HTML5 canvas game, I need to cross-fade two sprites which have some glow around them. (Glow is backed into sprites.) Initially, the first sprite is visible. During the cross-fade the first ...
2
votes
1answer
884 views

Collision detection problems - Javascript/Canvas game

What I want to do: I simply want the have a 2D array to represent my game map. I want a player sprite and I want that sprite to be able to move around my map freely using the keyboard and also have ...
2
votes
1answer
7k views

How to rotate a moving canvas in Android

I am developing an Android game. In this game some trains are moving on tracks. I am able to move trains horizontally and vertically using two train images for horizontal train and vertical train ...
2
votes
2answers
2k views

Canvas Rotation collision detection on a sprite

I am using this code to detect collisions between two rectangular sprites. ...
2
votes
1answer
150 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 ...
2
votes
1answer
2k 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() ...
2
votes
1answer
102 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
1answer
89 views

Best practice/way for client to speak with server

I'm making a multiplayer game in HTML5 Canvas and Node using Express and Socket.io. It's a platformer style game and so far the players are able to see each other and move around on the screen. It ...
2
votes
1answer
654 views

tilting image for mode7 game in HTML5

I'm making a mode7 game like mario-kart and I need to tilt the image before I draw it, I have tried using a buffer canvas to tilt the image then draw it on the games canvas but this makes it laggy (...
2
votes
1answer
957 views

Drawing/adding shape objects with the mouse on html canvas

I've started with the canvas paint tutorial from link which worked fine with a few problems that can be fixed later. I've been checking a lot of posts on drawing shapes on the canvas but they all use ...
2
votes
2answers
782 views

Offset during zooming to keep object within boundries

I have a simple zoom feature which lets the user zoom in and out. I'm having an issue how ever when i zoom out the object gets smaller to the point that the boundaries become broken. The idea is the ...
2
votes
1answer
449 views

How to shift a vector based on the rotation of another vector?

I’m learning 2D programming, so excuse my approximations, and please, don’t hesitate to correct me. I am just trying to fire a bullet from a player. I’m using HTML canvas (top left origin). Here is a ...
2
votes
1answer
418 views

Recreating Doodle Jump in Canvas - Platforms spawning out of reach

I have started to recreate Doodle Jump in HTML using Canvas. Here's my current progress. As you can see, if you play it for a few seconds, some platforms will be out of the player's reach. I don't ...
2
votes
2answers
524 views

how to transform child elements position into a world position

I'm making a 2d space game in Javascript with canvas. In this game there's a bunch of spaceships, positioned in world space, with turrets, positioned relative to their parent ships. These objects also ...
2
votes
3answers
4k views

HTML5 clicking objects in canvas

I have a function in my JS that gets the user's mouse click on the canvas. Now lets say I have a random shape on my canvas (really its a PNG image which is rectangular) but i don't want to include ...
2
votes
2answers
2k views

Javascript Isometric draw optimization

I'm having trouble with isometric tiles drawing. At the moment I got an array with the tiles i want to draw. And it all works fine until i increase the size of the array. Since I draw ALL tiles on ...
2
votes
2answers
252 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? <...
2
votes
0answers
437 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 ...
2
votes
0answers
58 views

CocoonJS draws shadow around tiles

I am using CocoonJS launcher on iOS for a simple tiled game. Calling canvas drawImage for tiles adds a shadow or ghost border around tiles. See this screenshot: http://martindrapeau.github.io/cocoon-...
2
votes
1answer
807 views

How can I repeat only a portion of an image in Javascript?

So I'm trying to repeat a portion of my spritesheet as a background. So far, I have attempted this: ...
2
votes
0answers
84 views

How to work with edge Texture [duplicate]

Im not sure if i use the right terms, but im not able to find something to start with. Im trying to develop a little HTML5 game. I have a ground with a texture and now I want to make a surrounding ...
2
votes
3answers
4k views

Text fields in a java canvas

So I'm trying to have some form of input in my game and I understand all the keyPresses and whatnot but the only issue is I have no idea of adding a textfield to the game. JTextfield doesnt seem to ...
2
votes
0answers
1k views

Converting coordinate systems to/from an isometric game world

I have tried searching and reading for an answer, but the information I could dig up either didn't fit what I need or was in the form akin to "Just multiply the vectors with the inverse matrix of.." ...

1 2
3
4 5
8