Canvas API

      O elemento canvas    

O elemento Canvas API é usado para efectuar desenhos na tela através de JavaScript.  o O único elemento HTML existente para isso é o elemento canvas, o resto todo é feito via Javascript. Veja como inse­rir o elemento canvas numa página:

  <canvas id=”x” width=”300” height=”300”></canvas>   

Onde: 

• x é o id do elemento canvas poderá ser acedido através do método getElementById().
• width - Especifica  o comprimento do rectangulo
• Height - especifica a altura do rectangulo.
• <canvas> - elemento html

Essa declaração deo elemento canvas irá retornar um retângulo vazio. O método getContext() irá nos permitir contexto de desenho, com Javascript,

         Método getContext()       

O metodo HTMLCanvasElement.getContext() pode devolver dois valores, se tudo ocorrer devidamente retorna um contexto de desenho no canvas, ou nulo (null) se o contexto identificado não for suportado.

Sintaxe:

            Canvas.getContext(contextType, contextAtrributes)

Onde: 

•  ContextType é um DOMString contendo o contexto identificador definindo o contexto de desenho associado ao canvas. Pode assumir os seguintes valores:

• "2d" - define uma renderização bidimensional(2D).
• "webgl" (or "experimental-webgl")  - define uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 1 (OpenGL ES 2.0).
• "webgl2" cria m objeto WebGL2RenderingContext que define uma renderização tridimensional. Esse contexto está disponivel somente em browsers que implementam WebGL versão 2 (OpenGL ES 3.0). 
• "bitmaprenderer" cria um  ImageBitmapRenderingContext que apenas provê a funcionalidade de substituir o conteúdo do canvas por um ImageBitmap.

 Este artigo apenas descreve os métodos e propriedades do getContext() com o atributo 2D.

 

               Definindo cores estilos e sombras       

As propriedades fillStyle, strokeStyle e lineWidth , são atributos gráficos que especificam a cor a ser usada por fill(),a cor a ser usada por stroke() e a largura das linhas a serem desenhadas por stroke(). Observe que esses parâmetros não são passados para os métodos fill() e stroke(), mas em vez disso fazem parte do estado gráfico geral do canvas. Se defir um método que desenha uma forma e não configura essas propriedades, o chamador de seu método pode definir a cor da forma configurando as propriedades strokeStyle e fillStyle antes de chamar o método.

Essas e outras propriedades são e explicadas a seguir:

 Propriedades

 

Propriedades	Descrição
fillStyle	Configura cor de preenchimento
strokeStyle	Configura a cor da linha de contorno
shadowColor	Retorna a cor da sombra
shadowBlur	Retorna a quantidade de suavização aplicada na borda da sombra pode ser configurada
shadowOffsetX	Especifica o deslocamento da sombra
shadowOffsetY	Especifica o deslocamento da sombra

 

Métodos

Método	Descrição
createLinearGradient()	Cria uma linha gradient
createPattern()	Cria um padrão e usa argumeento repeat”, para repetir o preenchimento
createRadialGradient()	especificam os centros e raios dos círculos
addColorStop()	definir as cores do gradiente

 

Propriedades que definem estilo de linhas

Property	Description
lineCap	especifica como as extremidades de um subcaminho aberto são
lineJoin	Especifica como os vértices entre segmentos de subcaminho são conectados. O valor padrão é “miter”, ou seja, as bordas externas dos dois segmentos de caminho são estendidas até se encontrarem em um ponto
lineWidth	Especifica a largura das linhas desenhadas por stroke() e strokeRect().
miterLimit	Retorna o comprimento máximo do miter

                Retângulos        

CanvasRenderingContext2D define quatro métodos para desenhar rectângulos. Que são, fillStyle, clearRect(), rect(), strokeRect(),  fillRect(). Esses quatro métodos de rectângulo esperam dois argumentos que especificam um canto do rectângulo, seguidos  de sua largura e altura. Normalmente, você especifica o canto superior esquerdo e, então, passa uma largura positiva e uma altura positiva, mas também pode especificar outros cantos e passar dimensões negativas.

 

Método	Descrição
rect()	Cria um rectangulo
fillRect()	Recebe a coordenada de inicio, alem da altura e largura
strokeRect()	Desenho o rectangulo(sem preenchimento) l)
clearRect()	Limpa a área definida por um retângulo

 

              Caminhos(Path)       

Para desenhar linhas em um canvas e para preencher as áreas envolvidas por essas linhas, é necessário definir um caminho. Um caminho é uma sequência de um ou mais subcaminhos. Um subcaminho é uma sequência de dois ou mais pontos conectados por segmentos de linha. Inicia um novo caminho com o método beginPath(). Inicie um novo subcaminho com o método moveTo(). Uma vez que tenha estabelecido o ponto de partida de um subcaminho com moveTo(), pode conectar esse ponto a um novo ponto com uma linha recta, chamando lineTo().

Métodos

Método	Descrição
fill()	Efectua o preenchimento do conteúdo
stroke()	Traça os contornos definidos
beginPath()	descarta qualquer caminho actualmente definido e inicia um novo
moveTo()	Para separar as formas, usa o método moveTo() – isso move a posição actual para um novo local sem adicionar uma linha de ligação
closePath()	para adicionar esse segmento de linha explicitamente para interligar o ponto de partida
lineTo()	Inicie um novo sub caminho conectando um ponto a um novo ponto com uma linha
clip()	Calcula a intersecção do interior do caminho actual com a região de recorte atual e usa essa região (menor) como a nova região de recorte.
quadraticCurveTo()	é como bezierCurveTo(), mas utiliza uma curva Bezier quadrática, em vez de cúbica, e tem apenas um ponto de controle
bezierCurveTo()	Adiciona um novo ponto P no sub-caminho e o conecta no ponto actual usando uma curva Bezier cúbica.
arc()	Adiciona um arco no sub-caminho actual. Ele conecta o ponto actual ao início do arco com uma linha recta e, então, conecta o início do arco ao final dele com uma parte de um círculo, deixando a extremidade do arco como o novo ponto atual.
arcTo()	Desenha uma linha recta e um arco circular exactamente como o método arc(), mas especifica o arco a ser desenhado usando parâmetros diferentes. Os argumentos de arcTo() especificam pontos P1 e P2 e um raio.
isPointInPath()	determina se um ponto especificado cai dentro (ou no limite) do caminho actual e, em caso positivo, retorna true; caso contrário, retorna false

 

  

                Desenhar Texto     

Para desenhar texto em um canvas, normalmente é usado o método fillText(), o qual desenha texto usando a cor (ou degradê ou padrão) especificada pela propriedade fillStyle. Para efeitos especiais em tamanhos de texto grandes, strokeText() pode ser usado para desenhar o contorno dos caracteres de texto individuais.

Propriedades

Propriedades	Descrição
font	Define a a fonte do texto
textAlign	especifica como o texto deve ser alinhado horizontalmente com relação à coordenada X
textBaseline	alinhamento vertical de texto

 Métodos

Método	Descrição
fillText()	desenhar texto em um canvas, normalmente é usado
strokeText()	usado para desenhar o contorno dos caracteres de texto individuais
measureText()	Mede a largura que o texto especificado ocuparia se fosse desenhado com a font actual e retorna um objeto TextMetrics contendo o resultado da medida

 

                Desenho de imagens      

Além dos elementos gráficos vectoriais (caminhos, linhas, etc.), a API Canvas também suporta imagens. DrawImage() pode ser chamado com três, cinco ou nove argumentos. Em todos os casos, o primeiro argumento é a imagem de origem a partir da qual os pixels serão copiados. Esse argumento imagem frequentemente é um elemento <img> ou uma imagem fora da tela criada com a construtora Image(), mas também pode ser outro elemento <canvas> ou mesmo um elemento <video>.

Na versão de drawImage() com três argumentos, o segundo e terceiro argumentos especificam as

coordenadas X e Y nas quais o canto superior esquerdo da imagem será desenhado. Nessa versão do método, a imagem de origem inteira é copiada no canvas.  

A versão de drawImage() com cinco argumentos acrescenta os argumentos width e height aos argumentos x e y descritos anteriormente.

  

Metodo	Descrição
drawImage()	Desenha uma imagem, canvas, oou video

 

Manipulação de pixels

O método getImageData() retorna um objeto ImageData representando os pixels (como componentes R, G, B e A) brutos (não pré multiplicados) de uma região retangular do canvas. É possivel criar objetos ImageData em branco e vazios, com createImageData().

Propriedades

Propriedades	Descrição
width	Retorna a largura da imagem
height	Retorna a altura do objecto imagem
data	Retorna dados de uma determindada imagem

 Métodos

Método	Descrição
createImageData()	criar objetos ImageData em branco e vazios
getImageData()	retorna um objeto ImageData representando os pixels (como componentes R, G, B e A) brutos (não pré multiplicados) de uma região retangular de seu canvas.
putImageData()	Cooloca os dados da imagem

 

                  Referencias       

Flanagan, David JavaScript : o guia definitivo / David Flanagan ; tradução: João Eduardo Nóbrega Tortello ; revisão técnica: Luciana Nedel. – 6. ed. – Porto Alegre : Bookman, 2013. xviii, 1062 p. : il. ; 25 cm.

 https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement/getContext

https://www.w3schools.com/tags/ref_canvas.asp