Question

All of my canvas drawing functions start something like this:

function drawMe(){

    var canvas = document.getElementById('canvas-id');

    var ctx = null;

    ctx = canvas.getContext('2d');

    ...
}

However I now want to draw the same image on a (variable) number of canvases, is there some alternative to getElementById() (perhaps in jQuery?) which can be used to easily grab more than one at once?

Thanks!

Josh

Answer 1

drawing to multiple canvases will be extremely inefficient, because rendering is one of most expensive operations you can do.

what you want to do is to use buffer. you can simply draw from one canvas to another.

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

ctx1.fillStyle = "black";
ctx1.fillRect(10, 10, 10, 10);

ctx2.drawImage(canvas1, 0, 0);

here’s a fiddle.

remember, you only need to call ctx.drawImage once – after you’re done with all drawing on first canvas.