Метод позволяет вырезать изображение по заранее созданной маске.
<html>
<head>
<canvas id="myCanvas" width="800" height="700" >Треугольное изображение</canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
//Создается маска
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
Ctx.clip(); //Вырезается кусок канвы
Ctx.drawImage(img1,0,0); // Строится изображение
}
</script>
</head>
<body onload='drawPoligon()'>
</body>
</html>
Если теперь еще раз изменить маску, то она отрежет оставшуюся часть канвы
<html>
<head>
<canvas id="myCanvas" width="800" height="700" ></canvas>
<script type='text/javascript'>
// Контекст для работы
var ctx = document.getElementById("myCanvas").getContext("2d");
var img1 = new Image();
img1.src = 'd:/MySite/forest.jpg';
function drawPoligon(){
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(470,470);
ctx.lineTo(20,470);
ctx.closePath();
Ctx.clip(); //Вырезается кусок канвы
ctx.beginPath();
ctx.moveTo(10,100);
ctx.lineTo(200,100);
ctx.lineTo(200,150);
ctx.lineTo(50,150);
ctx.closePath();
