canvas怎么可以同时放两个对象

为什么canvas不能同时放两个？以及如何放两个
我想同时将这两个放在一起，但是做不到。
变成了一种有a就没有b的情况，如何考虑和解决

img

img

有黑色背景，被背景覆盖掉了吧。。下面这示例没背景色，叠加在一起。将背景色去掉。黑色背景可以设置canvas的容器背景色为黑色来实现，而不是给canvas填充黑色背景

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "green";
    ctx.fillRect(10, 10, 50, 50);


    var imgData = ctx.getImageData(10, 10, 50, 50);
    ctx.putImageData(imgData, 30, 30);
    ctx.fillStyle = "red";

    ctx.fillRect(40, 40, 50, 50);
    ctx.putImageData(imgData, 45, 45);
</script>

就是我现在写的是两个函数，然后就是用context.putImageData(imagedata, 0, 0); 分别在两个函数的最后插入 然后我现在想让这几个图形都放在一起。