canvas and background as image

Question

I'm trying to have a page where users can customize a canvas and then email the finished project to themselves. I set the background of the canvas using the following javascript:

function setbackground1() {
  document.getElementById('myCanvas').setAttribute("class", 
 "background1");
}
function setbackground2() {
  document.getElementById('myCanvas').setAttribute("class", 
 "background2");
}

and included a form on the page to populate the rest of the canvas. I have tried various ways of including canvas.toDataURL() in order to save the canvas as an image that can later be emailed to them however the background image is not part of the saved image. (similar problem to Canvas to Save Image and Email but my text saves not my images)

I've been trying variations of this but it's not working for me.

  function setbackground11() {

    var img = new Image();
    img.src = 'background1.jpg';
    img.onload = function () {
      ctx.fillRect( 0, 0, canvas.width, canvas.height )
    }
}

I believe that I somehow have to reference myCanvas id as well

var canvas = document.getElementById('canvas');
             var ctx = canvas.getContext('2d');`

Ben West Ben West · Accepted Answer · 2018-04-26T17:32:04

CSS styles aren't part of the canvas image. For a solid color:

ctx.fillStyle = 'green'
ctx.fillRect( 0, 0, canvas.width, canvas.height )

For an image:

var img = new Image();
img.src = 'background1.jpg';
img.onload = function () {
    ctx.drawImage( img, 0, 0, canvas.width, canvas.height )
    // do the rest of your drawing over the background
}

canvas and background as image

1 Answers