Geek Answers Handbook

Is it possible to draw several canvases at once?

All of my canvas painting features start something like this:

function drawMe(){ var canvas = document.getElementById('canvas-id'); var ctx = null; ctx = canvas.getContext('2d'); ... }

However, now I want to draw the same image on the (variable) number of canvases, is there any alternative to getElementById() (possibly in jQuery?) That can be used to simply capture more than once?

Thanks!

Josh

+4
source share
6 answers

drawing on several canvases will be extremely inefficient, since rendering is one of the most expensive operations you can do.

what you want to do is use a buffer. you can just paint 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 is fiddle .

remember, you only need to call ctx.drawImage once - after you finish with all the drawings on the first canvas.

+5
source

With jQuery, if you make $ ('. Blah'), you get all the elements of the "blah" class. Therefore, if you give all your canvases to this class, you can simply scroll through them all and draw on each of them.

It is ideal to get all contexts only once, so if drawMe not called only once, you should collect all contexts only once, and then pass this array to drawMe every time it is called.

+2
source

Interesting ... I'm sure this is not the best solution (I'm not quite sure that it will work!), And it suggests a class with which you can define your canvas, but try the following:

 var canvases, contexts, imgdata = 0; function init() { canvases = document.getElementsByClassName('cvs-class'); contexts = []; for(var i = 0; i < canvases.length; i++) { contexts[i] = canvases[i].getContext('2d'); //initialize each canvas with context. } } function drawToCanvas() { // Do your drawing on canvases[0]; imgdata = contexts[0].getImageData(0,0,canvases[0].width,canvases[0].height); paintToAllContexts(); } function paintToAllContexts() { for(var i=0; i<canvases.length; i++) { contexts[i].putImageData(imgdata,0,0); } } function document.getElementsByClassName(class) { var nodes = []; var cl = new RegExp('\\b'+cl+'\\b'); var el = this.getElementsByTagName('*'); for(var i = 0; i < el.length; i++) { var cls = el[i].className; if(cl.test(cls)) nodes.push(el[i]); } return nodes; }
+2
source

If you are painting a complex image on multiple canvases, it might be better:

  • Draw a complex image on the first canvas.
  • Paste this canvas onto other canvases using drawImage() (which can accept the canvas parameter).

Thus, you simply copy the pixels of the image, and not repeatedly draw something complicated. If this is just one image, it might be better to just draw it in the same way as the other answers.

+2
source

Give each canvas a class and cycle through each canvas with the class.

0
source 
 var allCanvases = document.getElementsByTagName('canvas');
0
source

More articles:


All Articles