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;
}
}
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.
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?