Esta é uma tecnologia experimental
Verifique a tabela de compatibilidade entre Navegadores cuidadosamente antes de usar essa funcionalidade em produção.

Path2D interface da API Canvas 2D é usada para declarar caminhos que são usados ​​posteriormente em objetos CanvasRenderingContext2D. Os métodos de caminho da interface CanvasRenderingContext2D também estão presentes nessa interface e permitem criar caminhos que você pode reter e reproduzir conforme necessário em uma tela.

Construtores

Path2D()
Path2D construtor. Cria um novo objeto Path2D.

Metodos

Path2D.addPath()
Adiciona um caminho ao caminho atual.
Path2D.closePath()
Faz com que o ponto da caneta retorne ao início do sub-caminho atual. Ele tenta desenhar uma linha reta desde o ponto atual até o início. Se a forma já foi fechada ou tem apenas um ponto, essa função não faz nada.
Path2D.moveTo()
Move o ponto inicial de um novo subcaminho para as coordenadas (x, y).
Path2D.lineTo()
Conecta o último ponto no subcaminho às coordenadas x, y com uma linha reta.
Path2D.bezierCurveTo()
Adiciona uma curva cúbica de Bézier ao caminho. Requer três pontos. Os dois primeiros pontos são pontos de controle e o terceiro é o ponto final. O ponto de partida é o último ponto no caminho atual, que pode ser alterado usando moveTo () antes de criar a curva Bézier.
Path2D.quadraticCurveTo()
Adiciona uma curva quadrática de Bézier ao caminho atual.
Path2D.arc()
Adiciona um arco ao caminho que é centralizado na posição (x, y) com raio r iniciando em startAngle e terminando em endAngle indo na direção dada no sentido anti-horário (padrão no sentido horário).
Path2D.arcTo()
Adiciona um arco ao caminho com os pontos de controle e raio dados, conectados ao ponto anterior por uma linha reta.
Path2D.ellipse()
Adiciona uma elipse ao caminho que é centralizado na posição (x, y) com os raios radiusX e radiusY começando em startAngle e terminando em endAngle indo na direção determinada no sentido anti-horário (padrão no sentido horário).
Path2D.rect()
Cria um caminho para um retângulo na posição (x, y) com um tamanho determinado por width e height.

Especificações

Specification Status Comment
HTML Living Standard
The definition of 'Path2D' in that specification.
Padrão em tempo real  

Compatibilidade com o Navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome Full support YesEdge Full support YesFirefox Full support 31IE ? Opera Full support YesSafari Full support 10WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 31Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support Yes
Path2D() constructor
Experimental
Chrome Full support YesEdge Full support Yes
Notes
Full support Yes
Notes
Notes The constructor for Path2D objects in Edge does not support being invoked with a string consisting of SVG path data. See issue 8438884 for details.
Firefox Full support 31IE ? Opera Full support YesSafari Full support 10WebView Android No support NoChrome Android Full support 42Edge Mobile ? Firefox Android Full support 31Opera Android Full support YesSafari iOS No support NoSamsung Internet Android Full support 4.0
addPath
Experimental
Chrome Full support YesEdge ? Firefox Full support 34IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 34Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

Veja também:

Etiquetas do documento e colaboradores

Colaboradores desta página: dayvitSiqueira
Última atualização por: dayvitSiqueira,