Конечно, используйте ctx.globalCompositeOperation = 'destination-atop';, и оно должно выглядеть так, как вы ожидаете.
Примерно так: http://jsfiddle.net/UcyX4/
(Выньте эту строку, чтобы увидеть проблемуу вас есть)
Предполагая, что это не единственная вещь, нарисованная на холсте, вам, вероятно, придется нарисовать это на временном холсте, а затем нарисовать этот холст на вашем обычном, иначе это может испортить всеранее нарисованные фигуры.Поэтому вам понадобится такая система: http://jsfiddle.net/dATfj/
edit: код вставлен в случае сбоя jsfiddle:
html:
<canvas id="canvas1" width="500" height="500"></canvas>
script:
var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var can2 = document.createElement('canvas');
can2.width = can.width;
can2.height = can.height;
ctx2 = can2.getContext('2d');
ctx.strokeStyle = 'rgba(0,0,0,0.7)';
ctx.fillStyle = 'rgba(0,0,0,0.7)';
ctx.lineWidth = 10;
// Stuff drawn normally before
// Here I draw one rect in the old way just to show the old way
// and show something on the canvas before:
ctx.beginPath();
ctx.rect(50,50,100,100);
ctx.fill();
ctx.stroke();
// Draw on can2 then draw can2 to can
ctx2.strokeStyle = 'rgba(0,0,0,0.7)';
ctx2.fillStyle = 'rgba(0,0,0,0.7)';
ctx2.lineWidth = 10;
ctx2.beginPath();
ctx2.rect(50,250,100,100);
ctx2.globalCompositeOperation = 'destination-atop';
ctx2.fill();
ctx2.stroke();
ctx.drawImage(can2, 0, 0);