Javascript метод clip()

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

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

Пример использования

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

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