[provigator]

есть 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