Я работаю над задачей по нанесению рисунка на несколько частей рубашки. Изображение рубашки не может быть одним изображением. Это делает с маленькими изображениями как левая рука, правая рука, воротник и т.д ...
Теперь я хочу применить рисунок или цвет ко всем частям внутри холста.
<canvas id="canvas" width=250 height=250 style="margin-left: 100px; background: pink"></canvas>
<script type="text/javascript">
var img1 = new Image, img2 = new Image, cnt = 2, img3 = new Image,
canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
// image loading for demo (ignore)
img1.onload = img2.onload = function() {if (!--cnt) go()};
// Left Arm
img1.src = "left_arm.png";
//Right Arm
img3.src = "right_arm.png";
// Pattern Image
img2.src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlncafGCzVapWvTID6msFfk7OWtQSCEEnbKSLQhzVk1cPqe9CQ"; //
function go() {
// create a pattern
ctx.fillStyle = ctx.createPattern(img2, "repeat");
// // fill canvas with pattern
ctx.fillRect(0, 0, canvas.width, canvas.height);
// // use blending mode multiply
ctx.globalCompositeOperation = "multiply";
// // draw sofa on top
ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
}
</script>