Método clip() do canvas
Definição e uso
clip() O método pode recortar formas e tamanhos arbitrários do canvas original.
Dica:Depois que uma área foi recortada, todos os desenhos subsequentes serão limitados à área recortada (não podem acessar outras áreas da tela de desenho). Você também pode salvar o área atual da tela de desenho antes de usar o método clip() com o método save(), e restaurá-la em qualquer momento posterior (através do método restore()).
Exemplo
Recorte uma área retangular de 200x120 pixels da tela de desenho. 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 retangular de recorte
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
// Em seguida do clip() desenhar retângulo verde
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 plenamente essa propriedade pela primeira vez.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Observação:O Internet Explorer 8 e versões anteriores não suportam o elemento <canvas>.
