Как «нарисовать» изображение на холсте?

Question

Я хочу использовать изображение, как это на холсте:

Пользователь будет «краски и заполнить» изображение, но не на верхней части контура.

Проблема в следующем:
Если я положил за холст, краска покроет контур.
Если я положил поверх холста взаимодействие с холстом изображения.

Помогите мне, ребята?

Answer 1

Использовать режим компоновки «destination-over» для рисования за существующим контентом (из изображений, векторов и т. Д.). Необходимо, чтобы существующий контент обеспечивал альфа-канал или композицию, не будет работать. Если альфа-канал отсутствует, вы можете 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> перед холстом и disable mouse events для него с использованием свойства CSS.