javascript - Editing two canvas elements -

i have 2 canvas elements, first 1 empty, , in second drawed big grid. in first 1 need add text , images going dragged grid. problem is, when add text empty canvas, grid disappears!! don't know how happen. i'm using simple code in script tag:

var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d");  var canvas2=document.getelementbyid("canvas2"); var ctx2=canvas2.getcontext("2d"); ctx2.font = "30px arial"; ctx2.filltext("catalog of equipments",10,50); 

and i'm calling 2 canvases in body:

<canvas id="canvas2" width=300 height=1000 style="border:2px solid #c3c3c3; left:320px; top:50px"></canvas> <canvas id="canvas" width=1000 height=1000 style="border:2px solid #c3c3c3; top:50px;"></canvas> 

in jsfiddle have spelt filltext capital f rather filltext. have corrected in jsfiddle.

var canvas2 = document.getelementbyid("canvas2"); var ctx2 = canvas2.getcontext("2d"); ctx2.font = "30px arial"; ctx2.filltext ("catalog of equipments",10,50);