Javascript 如何对三个图像使用globalCompositeOperation？

如何使用此功能在红色和绿色框之间放置蓝色框

我需要达到这个效果

这是一个例子

HTML

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

在绘制图像之前，需要先聆听图像的

onload

事件。要有图像超过图像，系列操作将有所帮助

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（'2d'）；
window.onload=draw1；
函数draw1（）{
var green=新图像（）；
green.onload=函数（）{
ctx.drawImage（绿色，0，0，200，200）；
图2（）；
};
green.src=http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
}
函数draw2（）{
var blue=新图像；
blue.onload=函数（）{
ctx.drawImage（蓝色、50、50、100、100）；
图3（）；
};
blue.src=http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
}
函数draw3（）{
var red=新图像（）；
red.onload=函数（）{
ctx.drawImage（红色，100100100100）；
};
red.src=http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
}

---

为什么不更改绘制顺序

function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(blue, 60, 30, 100, 100);   
ctx.drawImage(red, 80, 50, 120, 100);
}

---

将红色移到最后，这样它将在蓝色和绿色上方绘制。

function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(blue, 60, 30, 100, 100);   
ctx.drawImage(red, 80, 50, 120, 100);
}