Índice do conteúdo

  1. O elemento <canvas>
  2. Contéudo reserva
  3. A tag </canvas> necessária
  4. O contexto de renderização
  5. Verificando por suporte
  6. Um modelo de esquema
  7. Um exemplo simples

Element can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions or even perform animations. You may (and should) provide alternate content inside the block. That content will be rendered both on older browsers that don’t support canvas and in browsers with JavaScript disabled.” href=”/en-US/docs/Web/HTML/Element/canvas”><canvas> propriamente dito.

<canvas id="tutorial" width="150" height="150"></canvas>

Ele se parece muito com o elemento  <img>, sendo que a única diferença é ela não ter os atributos src e alt. O elemento <canvas> possui apenas dois atributos – width e height. Esses dois atributos são opcionais e podem ser configurados pelo uso das propriedades do DOM. Quando nenhum atributo width ou height é especificado, o canvas será configurado com um comprimento de 300 pixels e uma altura de 150 pixels. O elemento pode ser dimensionado arbitrariamente pelo  CSS, mas durante a renderização da imagem ele é escalonado para caber no tamanho do layout.

Nota: Se sua renderização ficar distorcida, tente especificar seus atributo width e height de forma explícita, e não usando o CSS.

O atributo id não é específico do elemento  <canvas> mas é um dos atributo padrão do HTML que podem ser aplicados a quase todos os elementos do HTML (como o atributo class por exemplo). É sempre uma boa idéia fornecer um  id porque torna muito fácil a identificação dele em nosso script.
O elemento <canvas> pode ser estilizado de forma similar a qualquer imagem (margem, borda, fundo, etc). Esses regras, porém, não afetam os desenhos feitos no canvas. Veremos como isso é feito mais a frente nesse artigo. Quando nenhuma regra de estilo é aplicada ao canvas, ele será definido como totalmente transparente.

Se conteúdo reserva não for necessário, um simples <canvas id="foo" ...></canvas> é totalmente compatível com todos os navegadores que suportam canvas.

O contexto de renderização

O canvas cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização, que são usados para criar e manipular o conteúdo exibido. Focaremos em um contexto de renderização 2D. Outros contexto podem fornecer diferentes tipos de renderização; por exemplo, o WebGL usa um contexto 3D (“experimental-webgl“) baseado no OpenGL ES.
O canvas é incialmente preenchido com um espaço em branco.  Para exibir algo, um script precisa acessar o contexto de renderização e desenhar nele. O elemento var canvas = document.getElementById('tutorial'); var ctx = canvas.getContext('2d');

A primeira linha recupera o nó do DOM para o elemento document.getElementById(). Uma vez que você possua o nó do elemento, pode acessar seu contexto de desenho usando o método getContext().

Um modelo de esquema

A seguir um model minimalista de um esquema que usaremos como ponto de partida para os próximos exemplos dessa série de artigos.

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

O script inclui uma função chamada draw(), que é executada quando a página termina de ser carregada; isso é feito pelo uso do evento load no documento. Essa função, ou uma parecida, pode ser chamada também pelo uso dos métodoswindow.setTimeout(), window.setInterval(), ou qualquer outro manipulador de eventos, desde que a página tenha sido carregada completamente.
A seguir o que o modelo acima deve exibir na prática:

Um exemplo simples

Para começar, vamos dar uma olhada em um exemplo simples que desenha dois retângulos que se interceptam, um deles possuindo transparência alpha; Exploraremos como isso funcionada em mais detalhes nos próximo artigos.

<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Esse exemplo será exibido dessa forma

Screenshot Live sample