キャンバス上の画像に「ペイントする」方法は？

Question

私は、キャンバス上で、このような画像を使用したい：

ユーザーが画像を「ペイントと塗りつぶし」しますが、ない輪郭線の上に。

問題は次のとおりです。
キャンバスの後ろに置くと、ペイントがアウトラインをカバーします。
キャンバスの上に置くと、イメージブロックキャンバスのやり取りが行われます。

あなたは私を助けることができますか？

Answer 1

既存のコンテンツの背後に（画像、ベクトルなどから）描画するための合成モード「宛先オーバー」を使用します。既存のコンテンツがアルファチャンネルを提供するか、コンポジションが機能しないことが必要です。アルファチャンネルがない場合は、アルファチャンネルにconvert inverse luma/matte（白）を入力できます。

// a quick-n-dirty demo 
 
var ctx = c.getContext("2d"); 
 
ctx.lineWidth = 10; 
 
ctx.moveTo(100, 0); ctx.lineTo(150, 150); ctx.stroke(); 
 
ctx.fillStyle = "#09f"; 
 

 
// KEY: composite mode - 
 
ctx.globalCompositeOperation = "destination-over"; 
 

 
// draw behind the line 
 
c.onmousemove = function(e) { 
 
    ctx.fillRect(e.clientX - 10, e.clientY - 10, 20, 20); 
 
};

body {margin:0} 
 
canvas {border:#777 solid 1px}

<canvas id="c"></canvas>

Answer 2

Hereは、drawImageの例です。プリロードされたイメージをキャンバスに描画できます。キャンバスの前に<img>オーバーレイを配置し、pointer-events: none CSSプロパティを使用してdisable mouse eventsを配置することもできます。