javascript - Using canvas.getContext("2d") on multiple canvases on same page -

i'm trying make page allows users choose canvas size want draw on.

to i've created page 3 canvases of different sizes along button each. i've hidden canvases in css used jquery show canvas when relevant button clicked. problem is, that's broken ability draw on canvases except 1 that's first in html doc. suspect problem code:

html

<canvas width="400" height="250" class="small"></canvas> <canvas width="600" height="400" class="medium"></canvas> <canvas width="1000" height="800" class="large"></canvas> 

js

var context = $canvas[0].getcontext("2d");  $canvas.mousedown(function(e){   lastevent = e;   mousedown = true; }).mousemove(function(e){    //draw lines   if(mousedown) {     context.beginpath();     context.moveto(lastevent.offsetx, lastevent.offsety);     context.lineto(e.offsetx, e.offsety);     context.strokestyle = color;     context.stroke();     lastevent = e;   } }).mouseup(function(){   mousedown = false; }).mouseleave(function(){   $canvas.mouseup();  }); 

is there way select call 3 canvases .getcontext string? full code in case it's useful

you should try that

var tab = [$canvas[0].getcontext("2d"), $canvas[1].getcontext("2d"), $canvas[2].getcontext("2d")] var lastevent = null; var mousedown = false;  canvasparent.mousedown(function(e) {   lastevent = e;   mousedown = true; }).mousemove(function(e) {   if(mousedown) {     var = 0;     while (tab[i])     {       tab[i].beginpath();       tab[i].moveto(lastevent.offsetx, lastevent.offsety);       tab[i].lineto(e.offsetx, e.offsety);       tab[i].strokestyle = color;       tab[i].stroke();       += 1;     }       lastevent = e;   } }).mouseup(function(e) {   mousedown = false; }).mouseleave(function() {   var = 0;   while (tab[i])   {     tab[i].mouseup()     += 1;   } });