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

Question

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.

You tried ctx.fillRect(), but it's not in your code. Where did you put it? — AuxTaco
– 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
– 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
– Kaiido, Commented May 16, 2019 at 23:28

Priyesh Diukar · Accepted Answer · 2019-05-16 18:06:37Z

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

answered May 16, 2019 at 18:06

Priyesh Diukar

2,1241 gold badge17 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Miu Over a year ago

Thank you for your advice, but I tried your code before. I couldn't draw anything on the canvas with my mouse. It didn't work as a drawing app. The canvas only showed green.

Miu Over a year ago

I don't still have privilege for editing my question. I'll post the same question with more details later.

MauriceNino · Accepted Answer · 2019-05-16 18:09:54Z

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

Thank you for your advice, but I tried your code before. I couldn't draw anything on the canvas with my mouse. It didn't work as a drawing app. The canvas only showed green.
Then there is probably something wrong with your drawing code and you should open another question.
I don't still have privilege for editing my question. I'll post the same question with more details later. Thank you for your advice.

qelli · Accepted Answer · 2019-05-16 19:29:17Z

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.

Thank you for your answer. I copied and pasted your code in my code. Then I couldn't draw anything. I think I should've shown more my code. I was advised to open another question. I'll post the same question with more details later.
@MiuTaji I managed to analyze your code and brought you the solution. It is in the live demo. Now the image is downloaded with a white background. Please let me know if it helped.
Thank you very much for LIVE DEMO. I think something is wrong with my drawing code. I added ctx.fillStyle and ctx.fillRect to the same place as you did. I've opened another question with more detail. I'd appreciate it if you could check and answer it as well. Here

Collectives™ on Stack Overflow

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

What I want to do

What I tried

Here is my code

3 Answers 3

2 Comments

3 Comments

Why?

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

What I want to do

What I tried

Here is my code

3 Answers 3

2 Comments

3 Comments

Why?

3 Comments

Linked

Related