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

[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

[Dilettante_Pro]

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

[provigator]

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)
}

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

[Rise]

provigator, clip() работает только с контуром (path). Есть методы для примитивных контуров rect(), arc(), и есть методы для создания контуров произвольной формы beginPath(), moveTo(), closePath(), lineTo(), quadraticCurveTo(), bezierCurveTo(), arcTo(). Контур сам по себе не отображается, его можно либо обвести stroke(), либо закрасить fill(), либо усечь clip() область рисования до его размеров и формы (изначально область рисования определена всей поверхностью холста). Обозначим контур усечения:

ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.drawImage(blue, 0, 0);
ctx.clip();
ctx.drawImage(orange, 75, 0);

В твоем же случае, вызов clip() на неопределенном контуре видимо порождает усечение области рисования до минимума, в связи с чем последующие изменения на холсте не видны.