Canvas in for loop, rendered once and speed multiplied?

[ReGGaeBOSS]

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?

[James_Hibbard]

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.

[markbrown4]

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

I need help with keydown and keyup events

Ok, the main problem is that you’re calling your draw function on every frame, but it’s doing a lot more than draw e.g. you’re binding the keypress - so when get around to pressing a key you’re running that function thousands of times and it will grind to a halt when you run out of memory. Here is the crux of the game loop, the loop runs as fast as it can(60fps) and then on each frame you update the state of the world based on the inputs and then draw function update(dt) { // …

[ReGGaeBOSS]

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).

[James_Hibbard]

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

[ReGGaeBOSS]

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

Edit fiddle - JSFiddle - Code Playground

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

[ReGGaeBOSS]

• https://jsfiddle.net/7j6ju1xs/37/

[James_Hibbard]

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

Canvas animation using requestAnimationFrame - JSFiddle - Code Playground

[ReGGaeBOSS]

Yeah pretty much. Sprite on multiple canvases.

[James_Hibbard]

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

[ReGGaeBOSS]

awesome, I salute you!

[James_Hibbard]

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

[ReGGaeBOSS]

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.

[James_Hibbard]

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.

[ReGGaeBOSS]

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?

Edit fiddle - JSFiddle - Code Playground