Best way to create repeating sprites using Canvas?

[away168]

Hey guys, I have used createPattern from Canvas for tiling sprites but I realized it's very expensive to use. Do you guys know any tips/other methods to do it that is faster than that?

 

Thanks.

[Gio]

Surely it can't be more expensive than drawing the same sprites many times with several drawImage() calls?

 

Anyway, you could do this once and draw to an off-screen canvas, then you can draw your off-screen canvas onto your main canvas.

[away168]

Yeah multiple drawImage calls is more expensive for sure... Guess I have no choice.

 

 

Anyway, you could do this once and draw to an off-screen canvas, then you can draw your off-screen canvas onto your main canvas.

 

I'm sorry I'm not clear yet, is that a parallax background example?

[Gio]

No, I meant... if the thing that your are drawing doesn't change, instead of drawing it every frame with createPattern, you could draw it with createPattern just once and cache it (draw it to a canvas object that isn't part of your DOM). Then for every frame draw this canvas object onto the canvas that is actually visible with drawImage (without having to use createPattern again).

[away168]

That's a nice out-of-the-box idea Gio, thanks!