Как я могу сделать цвет фона холста белым с помощью JavaScript?

Question

Что я хочу сделать

Я хочу знать, как сделать фоновый цвет белым.

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

Как мне поменять его на белый?

---

Что я пытался

Я добавил следующий код в свой код, но он не работал должным образом. Я ничего не мог нарисовать.

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);

---

Вот мой код

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';

  ...

function draw(e) {
  if (!isDrawing) return;
  console.log(e);
  ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  [lastX, lastY] = [e.offsetX, e.offsetY];

  ...

}

canvas.addEventListener('mousedown', (e) => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener('mousemove', draw);

  ...

downloadBtn.addEventListener('click', downloadImage);
function downloadImage() {
  if (canvas.msToBlob) {
    const blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob, filename);
  } else {
      downloadLink.href = canvas.toDataURL('image/png');
      downloadLink.download = filename;
      downloadLink.click();
  }
}

Я хочу сделать цвет фона загруженного изображения белым.

Answer 1

На холсте вы можете использовать getAttribute(), чтобы получить размер.Посмотрите на мой фрагмент:

let canvas = document.getElementById('canvas');
let cheight = parseInt(canvas.getAttribute("height"));
let cwidth = parseInt(canvas.getAttribute("width"));

let context = canvas.getContext('2d');

context.fillStyle = "green";
context.fillRect(0,0,cwidth,cheight);

<canvas width="200" height="200" id="canvas">

Answer 2

В вашей функции draw() вам нужно добавить именно такой фон, как этот:

const canvas = document.querySelector('#draw');
const ctx = canvas.getContext('2d');
ctx.strokeStyle = '#BADA55';
ctx.fillStyle = "#ffffff"; //HERE, use HEX format in 6 digits
ctx.fillRect(0, 0, canvas.width, canvas.height); //HERE

 ...

function draw(e) {
    ...
}

Почему?

Вы должны нарисовать фон перед всем, иначе рисуетефон снова и снова или также над всем приведет к тому, что белый прямоугольник будет перекрывать все на вашем холсте.

Вот LIVE DEMO .

Answer 3

Вы можете использовать следующий код для установки цвета фона холста.

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "green";
context.fillRect(0, 0, canvas.width, canvas.height);

canvas{ border: 1px solid black; }

<canvas width=300 height=150 id="canvas">