HTML5 Canvas with Predefined Image

Question

最近、私はHTML5 Canvasで作業を始めました。私は生成ましょうその後など

、いくつかの線、図形を描画します

私はボディチャート画像（所定の画像）とキャンバスをロードしていて、そのユーザーに次のように 私は問題をしました

var canvas = document.getElementById("MyCanvas"); 
var dataURL = canvas.toDataURL(); 
var image = new Image(); 
image.src = dataURL; 

ただし、ここではユーザー（線、図形）がPNG画像として描画する要素のみを生成します。あらかじめ定義されたキャンバスの背景画像は取得されません。

キャンバスの背景イメージとユーザー入力の描画要素の両方を含むPNGイメージを生成する必要があります。

これを行う方法？

Answer 1

実際にこれらの機能を活用し、あなたのキャンバスにあなたのイメージを描画しよう：

var canvas = document.getElementById("MyCanvas"); 
    var img = new Image(); 
    img.src = 'pathToYourImageHere'; 
    canvas.drawImage(img,0,0); /* 0,0 is x and y from the top left */ 

あなたは今、それを保存しようとすると、それはまた、あなたの背景画像を保存する必要があります。

EDIT：あなたのコメントに応えて ：

次の2つの異なるキャンバスを使用して、レイヤリングの問題をcircumentすることができます。 1つはイメージ用、もう1つは図面用です。絶対配置を使用してそれらを重ね合わせます。 あなたはここで多くを読むことができます：Save many canvas element as image

EDIT2： しかし、次のコードは、最初の画像を描画して、弧を描き、そしてレイヤーは罰金になりますので、実際には、レイヤーの問題を持つべきではありません。

var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var imageObj = new Image(); 
imageObj.src = "somePathToAnImage"; 
context.drawImage(imageObj, 50, 50); 

var x = canvas.width/2; 
var y = canvas.height/2; 
var radius = 75; 
var startAngle = 1.1 * Math.PI; 
var endAngle = 1.9 * Math.PI; 
var counterClockwise = false; 

context.beginPath(); 
context.arc(x, y, radius, startAngle, endAngle, counterClockwise); 
context.lineWidth = 15; 
// line color 
context.strokeStyle = "red"; 
context.stroke(); 

レイヤリングは問題ありませんが、バックグラウンドなしで図面のみを保存する場合は、2つのキャンバスを使用する方がよいでしょう。新しいキャンバスに保存して保存することはできますが、キャンバスを1つしか使用しない場合は、バックグラウンドから描画を分離するのが難しくなります。

Answer 2

これは、画像を読み込む時間が必要なため、オンロード機能を使用する必要があるためです。

imgObj.onload = function() { context.drawImage(imageObj, 50, 50); imgLoaded = true;} 
if (imgLoaded) { /*you draw shapes here */ }