Método clip() do canvas HTML
Definição e uso
clip() O método clip() pode recortar formas e tamanhos arbitrários do canvas original.
Dica:Após recortar uma área, todos os desenhos subsequentes serão limitados à área recortada (não podem acessar outras áreas do canvas). Você também pode salvar o área atual do canvas antes de usar o método clip() usando o método save(), e restaurá-la em qualquer momento posterior (através do método restore()).
Exemplo
Recorte uma área retangular de 200*120 pixels do canvas. Em seguida, desenhe um retângulo verde. Apenas a parte do retângulo verde dentro da área recortada é visível:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Área de retângulo cortada
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Desenhar retângulo verde após clip()
ctx.fillStyle="green";
ctx.fillRect(0,0,150,100);
Sintaxe
context.clip();
Suporte do navegador
Os números na tabela indicam a versão do navegador que suportou primeiramente essa propriedade.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Nota:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.
