ダウンロードする前にキャンバスの背景を設定するには

Question

私は描画アプリケーションを作成していて、この関数を使用してキャンバスイメージをダウンロードしています。私は携帯電話上であるため、ダウンロードする前にwhiteにキャンバスの背景を設定したい

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

、画像が非常に歪んだと黒です。何か案は？

Answer 1

キャンバス全体のサイズ、キャンバスの実際の内容の下に白い矩形を描きたい場合があります。

// 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); 

toDataUrl（）ストリームを生成する前にこれらの行を適用する必要があります。

アイデアfrom：http://www.mikechambers.com/blog/2011/01/31/setting-the-background-color-when-generating-images-from-canvas-todataurl/