javascript - merging canvas and background -

i have canvas has gif background. need user upload drawing , bg, user can see drawing in relation bg. canvas.todataurl(); code shows canvas area user drawings, not bg. how flatten or "merge layers", can upload database.

var mousepressed = false;  var lastx, lasty;  var ctx;    function initthis() {    ctx = document.getelementbyid('mycanvas').getcontext("2d");      $('#mycanvas').mousedown(function(e) {      mousepressed = true;      draw(e.pagex - $(this).offset().left, e.pagey - $(this).offset().top, false);    });      $('#mycanvas').mousemove(function(e) {      if (mousepressed) {        draw(e.pagex - $(this).offset().left, e.pagey - $(this).offset().top, true);      }    });      $('#mycanvas').mouseup(function(e) {      mousepressed = false;    });    $('#mycanvas').mouseleave(function(e) {      mousepressed = false;    });  }    function draw(x, y, isdown) {    if (isdown) {      ctx.beginpath();      ctx.strokestyle = $('#selcolor').val();      ctx.linewidth = $('#selwidth').val();      ctx.linejoin = "round";      ctx.moveto(lastx, lasty);      ctx.lineto(x, y);      ctx.closepath();      ctx.stroke();    }    lastx = x;    lasty = y;  }    function cleararea() {    // use identity matrix while clearing canvas    ctx.settransform(1, 0, 0, 1, 0, 0);    ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height);  }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>  <script type="text/javascript" src="jscripts/jscode.js">    var dataurl = canvas.todataurl();  </script>    <!--canvas drawing , upload mysql-->  <div align="center">    <img src="graphics/teethdrawing.gif" width="705" style="position: absolute; z-index: -1" />    <canvas id="mycanvas" width="700" height="965" style="border:2px solid black"></canvas>      <br />    <br />    <button onclick="javascript:cleararea();return false;">clear area</button>    line width :    <select id="selwidth">      <option value="1">1</option>      <option value="3" selected="selected">3</option>      <option value="5">5</option>      </select>    color :    <select id="selcolor">      <option value="black" selected="selected">black</option>      <option value="blue">blue</option>      <option value="red">red</option>        </select>  </div>  </div>

the image isn't shown show on page.

help

you can add background image "behind" existing canvas drawings using compositing.

// give image id it's more fetched <img id='bk' src="graphics/teethdrawing.gif"       width="705" style="position: absolute; z-index: -1" />  // fetch reference bk image var bk=document.getelementbyid('bk');  // causes new drawings drawn behind existing drawings ctx.globalcompositeoperation='destination-over';  // draw img canvas (behind existing lines) ctx.drawimage(bk,0,0);  // clean up! reset default. ctx.globalcompositeoperation='source-over'; 

this process permanently add bk image canvas. if need bk , canvas-drawings separated can create second in-memory canvas flatten content drawing both bk-image , canvas-drawings in-memory canvas.

// create temporary canvas  var mem=document.createelement('canvas'); var mctx=mem.getcontext('2d'); mem.width=canvas.width; mem.height=canvas.height;  // draw bk mem canvas mctx.drawimage(bk,0,0);  // draw main canvas mem canvas mctx.drawimage(canvas,0,0);