How to set the background image of a html 5 canvas to png image

Question

I would like to know how it is possible to set the background image of a canvas to a  png file  I do not want to add the image in the back of the canvas and make the canvas transparent    I want the user to be able to actually draw on that canvas with the background being the  png image so that I can extract it later as a  png with the drawings that the user made

User · Answer

You can draw the image on the canvas and let the user draw on top of that.

The drawImage() function will help you with that, see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

User · Answer

You can use this plugin  but for printing purpose i have added some code like  lt button onclick  window print     gt Print lt  button gt  and for saving image  lt button onclick  savePhoto     gt Save Picture lt  button gt        function savePhoto          var canvas   document getElementById  canvas         var img      canvas toDataURL  image png         window location   img     checkout this plugin http   www williammalone com articles create-html5-canvas-javascript-drawing-app

User · Answer

As shown in this example  you can apply a background to a canvas element through CSS and this background will not be considered part  the image  e g  when fetching the contents through toDataURL     Here are the contents of the example  for Stack Overflow posterity    lt  DOCTYPE HTML gt   lt html gt  lt head gt     lt meta charset  utf-8  gt     lt title gt Canvas Background through CSS lt  title gt     lt style type  text css  media  screen  gt      canvas  img   display block  margin 1em auto  border 1px solid black        canvas   background url lotsalasers jpg       lt  style gt   lt  head gt  lt body gt   lt canvas width  800  height  300  gt  lt  canvas gt   lt img gt   lt script type  text javascript  charset  utf-8  gt    var can   document getElementsByTagName  canvas   0     var ctx   can getContext  2d      ctx strokeStyle     f00     ctx lineWidth     6    ctx lineJoin       round     ctx strokeRect 140 60 40 40     var img   document getElementsByTagName  img   0     img src   can toDataURL     lt  script gt   lt  body gt  lt  html gt

User · Answer

You can give the background image in css     canvas   background url example jpg      it will show you canvas back ground image

[html] How to set the background image of a html 5 canvas to .png image

Examples related to html

Examples related to canvas

Examples related to background-image