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