How can I make background color of canvas white with JavaScript? - Stack Overflow

What I want to do

I want to know how to make background color white.

I built a drawing app with canvas. You can download the canvas image you have drawn by clicking the Download button. But its background color is black (technically transparent).

How can I change it to white?

---

What I tried

I added the following code to my code, but it didn't work well. I couldn't draw anything.

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

---

Here is my code

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();
  }
}

I want to make background color of downloaded image white.

What I want to do

I want to know how to make background color white.

I built a drawing app with canvas. You can download the canvas image you have drawn by clicking the Download button. But its background color is black (technically transparent).

How can I change it to white?

---

What I tried

I added the following code to my code, but it didn't work well. I couldn't draw anything.

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

---

Here is my code

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();
  }
}

I want to make background color of downloaded image white.

• javascript
• canvas

Share Improve this question Follow asked May 16, 2019 at 18:01 MiuMiu 84488 silver badges2424 bronze badges 3

• You tried ctx.fillRect(), but it's not in your code. Where did you put it? – AuxTaco Commented May 16, 2019 at 18:14
• I removed ctx.fillRect(). I'll post the same question with more details later because I don't still have privilege for editing my question. – Miu Commented May 16, 2019 at 18:41
• What do you mean you don't have the privilege to edit your question. This is no privilege, at 1 rep you already can. Closing the other one as dupe of this. – Kaiido Commented May 16, 2019 at 23:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You can use the following code to set background color of canvas.

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">

On a canvas you can use getAttribute() to retrieve the dimension. Look at my snippet:

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">

In your draw() function you need to add specifically the background like this:

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) {
    ...
}

Why?

You need to draw the background before everything, otherwise drawing the background over and over, or also above everything would result in the white rectangle overlapping everything on your canvas.

Here is a LIVE DEMO.