Ali Zia Ali Zia - 7 months ago 26
Javascript Question

How can I set the canvas background before downloading

I am creating a drawing app, and using this function to download the canvas image.

function download() {
var dt = canvas.toDataURL('image/png');
this.href = dt;
};


I want to set the canvas background to
white
before downloading because on mobile, the images are very distorted and black. Any ideas?

Answer

You may want to draw a white rectangle the size of the entire canvas, beneath the actual content of the canvas.

// get the canvas 2d context
var ctx = canvas.getContext('2d');

// set the ctx to draw beneath your current content
ctx.globalCompositeOperation = 'destination-over';

// set the fill color to white
ctx.fillStyle = 'white';

// apply fill starting from point (0,0) to point (canvas.width,canvas.height)
// these two points are the top left and the bottom right of the canvas
ctx.fillRect(0, 0, canvas.width, canvas.height);

You have to apply these lines before generating your toDataUrl() stream.

Idea taken from: http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/