24

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.

Farzad Towhidi
  • 363
  • 2
  • 6
  • 13

4 Answers4

36

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:

<!DOCTYPE HTML>
<html><head>
  <meta charset="utf-8">
  <title>Canvas Background through CSS</title>
  <style type="text/css" media="screen">
    canvas, img { display:block; margin:1em auto; border:1px solid black; }
    canvas { background:url(lotsalasers.jpg) }
  </style>
</head><body>
<canvas width="800" height="300"></canvas>
<img>
<script type="text/javascript" charset="utf-8">
  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();
</script>
</body></html>
Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • Is there some way for the CSS background to be considered **part of the image**? I was trying to help this [fellow overflowian](http://stackoverflow.com/a/21835070/607874) – Jose Rui Santos Feb 18 '14 at 20:40
  • @JoseRuiSantos No, not via CSS. You would need to `drawImage()` to the canvas for it to be part of it. – Phrogz Feb 18 '14 at 21:38
  • Thats what I thought. As you can see in the link, I am dealing with run-time generated content `-moz-element`, so there is no way to "get" this image, I am afraid. Thanks for the help anyway. – Jose Rui Santos Feb 19 '14 at 05:22
17

You can give the background image in css :

#canvas { background:url(example.jpg) }

it will show you canvas back ground image

mridul
  • 1,986
  • 9
  • 29
  • 50
user1325775
  • 171
  • 1
  • 4
3

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

groovecoder
  • 1,551
  • 1
  • 17
  • 27
oberhamsi
  • 1,303
  • 8
  • 18
  • This requires the user to record the drawing commands of the user and 'replay' them on a blank canvas to extract the backgroundless results. Far easier to just not draw the background image in the first place so that you can extract the result without issue. – Phrogz Mar 09 '11 at 21:01
  • indeed it would be. i somehow missed the last sentence of his question or did he add it? – oberhamsi Mar 29 '11 at 13:31
0

You can use this plugin, but for printing purpose i have added some code like <button onclick="window.print();">Print</button> and for saving image <button onclick="savePhoto();">Save Picture</button>

     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

Raza
  • 1,095
  • 11
  • 16