<canvas> маска для картинки
 

есть 3 картинки на холсте:

pic1 = new Image()
	pic1.src = 'image1.png'  // черный квадрат
	pic2 = new Image()
	pic2.src = 'image2.png'  // синий квадрат
	pic3 = new Image()
	pic3.src = 'image3.png'  // круг
		
	pic3.onload = function() {				
		mask()
	}

	function mask() {
		ctx.drawImage(pic1, 0, 0)
		ctx.drawImage(pic2, 0, 0)
		ctx.drawImage(pic3, 75, 0)
	}

надо сделать маску в форме круга для синего квадрата:

pic1 = new Image()
	pic1.src = 'image1.png'  // черный квадрат
	pic2 = new Image()
	pic2.src = 'image2.png'  // синий квадрат
	pic3 = new Image()
	pic3.src = 'image3.png'  // круг
		
	pic3.onload = function() {				
		mask()
	}
	function mask() {
		ctx.drawImage(pic1, 0, 0)
		ctx.drawImage(pic2, 0, 0)
		ctx.globalCompositeOperation = 'destination-in'   // destination-in — отображается только та часть изображения, где фигуры пересекаются. Сверху старое изображение
		ctx.drawImage(pic3, 75, 0)
	}

в результате круг маскирует все изображение на холсте:


как сделать маску только для синего квадрата?
так чтобы черный выводился полностью

globalCompositeOperation
определяет как будут себя вести перекрывающиеся фигуры
http://xiper.net/manuals/canvas/2D-a...ositeOperation

ctx.drawImage(pic1, 0, 0)
        ctx.drawImage(pic2, 0, 0)
        ctx.globalCompositeOperation = 'destination-out'  
        ctx.drawImage(pic3, 75, 0)

ctx.globalCompositeOperation = 'destination-out'
оставляет все что находится вне круга, область внутри круга делает прозрачной

задача: маскировать кругом только синий квадрат - вывести ту часть где они пересекаются, черный квадрат не должен маскироваться



этот скрин сделал во флеше с помощью слоев

окей,

function mask() {
	ctx.drawImage(pic2, 0, 0)
	ctx.globalCompositeOperation = 'destination-in'
	ctx.drawImage(pic3, 75, 0)
	ctx.globalCompositeOperation = 'destination-over'
	ctx.drawImage(pic1, 0, 0)
	ctx.globalCompositeOperation = 'source-over'
}

работает, буду разбираться...