[provigator]

есть 2 фигуры:

circle = new Image()
	circle.src = 'circle.png' 	
circle.onload = function() {
	ctx.rect(0, 0, 100, 100) // рисуем квадрат
	ctx.stroke()
	ctx.drawImage(circle, 75, 0) // выводим круг
}

маскируем круг квадратом, методом Clip() :

circle = new Image()
	circle.src = 'circle.png' 
circle.onload = function() {
	ctx.rect(0, 0, 100, 100)
	ctx.stroke()
	ctx.clip()
	ctx.drawImage(circle, 75, 0)
}

метод работает


загружаем 2 картинки:

square = new Image()
	square.src = 'square.png' 
	circle = new Image()
	circle.src = 'circle.png' 
circle.onload = function() {
	ctx.drawImage(square, 0, 0)	// выводим квадрат
	ctx.drawImage(circle, 75, 0) // выводим круг
}

маскируем круг квадратом:

square = new Image()
	square.src = 'square.png' 
	circle = new Image()
	circle.src = 'circle.png' 
circle.onload = function() {
	ctx.drawImage(square, 0, 0)	
	ctx.clip()
	ctx.drawImage(circle, 75, 0)
}

в результате выводится маска


возможно ли в качестве маски указать картинку PNG ?
или метод работает только с объектами rect(), arc() и т.п.

http://stackoverflow.com/questions/1...ng-overlapping