Webkit lays large images on canvas

Question

I have some problems with webkit (chrome / safari) and Canvas with large images.

For my client, we had to write an animated intro video with changing images of 80 ms per frame on canvas.

There are 130 frames, and we had to put individual images in 4 sprites to reduce single page page loading.

Each sprite size is about 2.5 MB, and we just cut a part of the necessary frame. While this is possible.

I don’t want to bother you with a lot of code. But in the end, it's about:

this. $ context.drawImage (img, 0, top, img.width-1, (img.height / sequenceCount) -1, 0, 0, this. $ canvas.width, this. $ canvas.height);

witch is called within 80 ms.

We did this and it works on all major browsers. But with webkit, every change to the next sprite leads to a hard lag of about 400 ms.

The same thing happened with IE9, but it could be fixed by drawing each sprite once at the beginning

if (Browser.ie9) { for(var x = 0; x < this.sequence[0].sprites.length; x++){ this.draw(this.sequence[0].sprites[x].obj, 0, 1); } this.$context.clearRect(0, 0, this.$canvas.width, this.$canvas.height); } 

(The draw function includes only the drawImage function from the previous example.)

But with webkit browsers, I get this delay time of ~ 400 ms.

Yes, the images are preloaded. So this is not a problem.

Any ideas what this could be?

Thanks for your help!

Answer 1

Each time you get the width of the canvas or image, you get access to the DOM, which is usually slower than access to JS memory. You can see the improvement if you save these values ​​when resizing and use the saved value instead.

 var canvasWidth, canvasHeight, imgWidth, imgHeight;