キャンバスに背景画像を保存する

Question

私はキャンバスの背景画像を持ち、キャンバスにいくつかの基本要素を追加しました。キャンバススタイルの背景画像でキャンバス（.png形式）を保存します。

が試み：

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png"); 

しかし、これはキャンバスの背景画像を保存していないようです。退出はありますか？画像の位置を保存するには

Answer 1

は、私はあなたが探して信じる：

window.location = canvas.canvas.toDataURL('image/png'); 

最初のキャンバスコールは、第二は、キャンバスオブジェクトである、あなたの変数です。 おそらく、変数の名前を一意にする必要があります。画像を再描画するように更新

var myCanvas = document.querySelector('myCanvas'),  
    img = document.createElement('img'),  
    ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null; 

    myCanvas.width = window.innerWidth; 
    myCanvas.height = window.innerHeight; 
    img.onload = function() { 
     ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height); 
    }; 
img.src = 'image.png'; 

：

は、背景はいくつかのより多くの作業が必要であることをキャンバスに画像を設定して行います。

Answer 2

あなたがイメージとしてキャンバス+背景を保存したいときは、イベントのシーケンスを実行する必要があります。

1. は通常のキャンバスと同じように大きなメモリ内のキャンバスを作成します。 //新しいキャンバスに最初のキャンバスを描くことが
2. ctx2.drawImage(can1, 0, 0)をCAN2呼び出し
3. ctx.clearRect(0, 0, width, height) //明確な最初のキャンバス
4. ctx.drawImage(background, 0, 0) //最初のキャンバスに画像を描画
5. ctx.drawImage(can2, 0, 0) //バックに（保存）最初のキャンバスを描きますそれ自体は