холст и фон как изображение

Question

Я пытаюсь создать страницу, на которой пользователи могут настроить холст, а затем отправить готовый проект по электронной почте. Я установил фон холста, используя следующий javascript:

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

и включил форму на странице, чтобы заполнить остальную часть холста. Я пробовал различные способы включения canvas.toDataURL (), чтобы сохранить холст как изображение, которое впоследствии может быть отправлено ему по электронной почте, однако фоновое изображение не является частью сохраненного изображения. (аналогично Canvas для сохранения изображения и электронной почты , но мой текст сохраняет не мои изображения)

Я пробовал варианты этого, но у меня это не работает.

  function setbackground11() {

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

Я считаю, что мне как-то нужно ссылаться и на myCanvas id

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

Answer 1

Стили CSS не являются частью изображения холста. Для сплошного цвета:

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

Для изображения:

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
}