<canvas> маска для картинки методом Clip()
 

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

provigator,
Попробуйте в качестве маски png с прозрачным фоном

2 картинки PNG с прозрачным фоном:

blue = new Image()
	blue.src = 'blue.png' 
	orange = new Image()
	orange.src = 'orange.png' 
orange.onload = function() {
	ctx.drawImage(blue, 0, 0)	
	ctx.drawImage(orange, 75, 0)
}

маскируем оранжевый круг синим:

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

выводится маска...