How to download a drawing from canvas keeping the background colour?

Question

I am working on an app in javascript and html that lets me draw on a canvas. When I download the image, there is no background.
How can I keep the background when downloading?

My javascript code for changing the background of the canvas:

document.getElementById('canvas').style.backgroundColor=#FF0000

I did not want to set the background using fillRect because I have a clear button and that would clear the background too.

How I download:
var dataUrl = canvas.toDataURL('image.png')
btnDownload.href = dataUrl

Answer 1

This will help you:

https://code.sololearn.com/WSLZPpBIFgr7/?ref=app

Answer 2

There is hardly any explanation. First complete tutorials. Otherwise, as with any language almost everything is learned by heart, which means look and apply.
Important: Path to the image file must be correct. Image that you have saved locally will only be visible to you. In general, save the image on the server with the code.
Exceptionally for SL Playground for example on Dropbox.
Here a second example. Have fun with it.

https://code.sololearn.com/WfD0hM4Zz82u/?ref=app

Answer 3

JaScript can you please explain?