Javascript метод clip()

Метод clip() обрезает область любой формы и размера, находящуюся вне указанного контура.

Примечание: После обрезки области все последующее рисование будет ограничено обрезанной областью (к другим областям холста доступа не будет). Тем не менее, перед использованием метода clip() можно сохранить текущую область холста при помощи метода save(), а затем в любое время восстановить ее при помощи метода restore().

JavaScript синтаксис: context.clip();

Пример

Обрезаем прямоугольную область 200*120 пикселей. Затем рисуем красный прямоугольник. Видна будет только та часть этого прямоугольника, которая находится внутри обрезанной области:

Ваш браузер не поддерживает HTML5 тег canvas.

JavaScript:


var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Обрежем прямоугольную область
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();

// После использования clip()
// нарисуем красный прямоугольник
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);