Canvas in for loop, rendered once and speed multiplied?

JavaScript
1

Hi,

I have a bunch of canvases (currently two) and for each canvas I want to draw an image (sprite). But what is happening is that the sprite is only drawn on the last canvas in the array, and the speed of the animation is multiplied with the number of canvases on the page.

This is how the code looks:

function smoke(){

	var cases = document.querySelectorAll('.case');

	for(var i = 0; i < cases.length; i++){

		var el = document.querySelectorAll('.case')[i];
		var sprite = el.querySelectorAll('.case__sprite')[0];
		var img = el.querySelectorAll('.case__img')[0];
		var imgContainer = el.querySelectorAll('.case__thumb')[0];
		var containerWidth = imgContainer.offsetWidth;
		var containerHeight = imgContainer.offsetHeight;

		var currentFrame = 0;
		var currentCol = currentRow = 0;
		var framePerRow = 53;
		var play = false;

		var caseCanvas = el.querySelectorAll('.case-canvas')[0];
		var caseContext = caseCanvas.getContext('2d');

		console.log(caseCanvas);
		console.log(caseContext);

		function renderCanvas() {

			caseCanvas.width = containerWidth;
			caseCanvas.height = containerHeight;

			caseContext.drawImage(sprite, 480*currentCol, 270*currentRow, 480, 270, 0, 0, containerWidth, containerHeight);
			caseContext.globalCompositeOperation = 'source-out';
			caseContext.drawImage(img, 0, 0, containerWidth, containerHeight);

			if (play) {
				currentFrame++;
				currentCol++;

				if (currentCol >= framePerRow) {
					currentCol = 0;
					currentRow++;
				}
			}

			requestAnimationFrame(renderCanvas);
		}

		renderCanvas();

		play = true;

	}

}

Anyone see what is wrong?

2

There’s a few things wrong with it. You could be a bit more efficient with querying the DOM, e.g.

var el = document.querySelectorAll('.case')[i];

could probably be:

var el = cases[i];

And you shouldn’t be defining the function in a for loop. I would imagine that this is what is causing you trouble.

Could you provide a minimal demo that we can run to recreate your problem.

3

This doesn’t directly answer your question but I think it will give you some ideas for how to implement the game loop.

4

hi,

thanks for the reply.

How would you implement the function? So that it can still make use of the variables declared in the loop? (bit of a js noob).

5

Could you provide a minimal demo that we can run to recreate your problem.

6

here is a fiddle of my trying to draw the same sprite on 3 canvases.

And while ur on it do u know why the sprite in the example just shows the first frame?=)

7
8

Just so I understood you correctly, you’re trying to do something like this, but for multiple canvas elements. Is that right?

9

Yeah pretty much. Sprite on multiple canvases.

10

Like this, then: https://jsfiddle.net/hibbard_eu/vkj3fk5d/1/

1 Like
11

awesome, I salute you!

12

I should mention that the code for rendering the sprite came from here: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/

13

Hmm having problem archieving the same with my code which is a bit different. I just don’t understand why I can’t:

var cases = document.querySelectorAll('.canvas');

function drawCanvases(i){
...
}

for(var i = 0; i < canvas.length; i++){
drawCanvases(i);
}

I get them all to be drawn doing like this but half the sprite animation just snaps to the end. I can’t show it here in “public” but I will give you a link in a PM and you can see.

14

Sorry man, I’m too busy to offer help via PM. I had a quick look at your site, but couldn’t even see any sprites.

15

Hi, I understand, no problem=)

I made a fiddle showcasing how my use case looks. The problem I have now is that for every canvas added the render/draw speed is multiplied. Any idea why?

16

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.