Tutorial simples: Formas básicas do canvas no html5

No html5 apareceu a tag <canvas>, com ela é possivel desenhar com código javascript, e até animar o desenho.

Como sou péssimo para desenhar resolvi experimentar com o canvas quando tive que fazer um ícone para a extensão de utf-8 que fiz para o Google Chrome, na documentação dizia que o ícone podia ser em canvas (é bom para extensões que mostram algum movimento no ícone), então vamos nessa ⚡

O ícone da extensão envolve os 3 principais e mais simples elementos, um retângulo, um círculo e texto.

Tudo começa com um arquivo html:

1
2
3
4
5
6
7
8
9
10
11
<html>
  <head>
    <title>Canvas tutorial</title>
  </head>
  <body>

    <!-- Senhoras e Senhores, Apresentandooo, o caaaannvaaasss!!! -->
    <canvas id="icon"></canvas>

  </body>
</html>

Mas assim ele não faz nada, precisa executar ao carregar a página, para isso é necessário um pouquinho de javascript. Um template para começar um canvas ficaria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
  <head>
    <title>Canvas tutorial</title>

    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('icon');
        if (canvas.getContext){//verifica se o navegador suporta
          var context = canvas.getContext('2d');
        }
      }
    </script>
  </head>

  <!-- desenha o canvas ao carregar a página,
  claro q na prática deve ser feito de maneira não intrusiva -->
  <body onload="draw();">

    <canvas id="icon" width="128" height="128"></canvas>

  </body>
</html>

A forma mais básica é o retângulo, prático para demarcar o tamanho do desenho.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
  <head>
    <title>Canvas tutorial</title>

    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('icon');
        if (canvas.getContext){
          var context = canvas.getContext('2d');

          //retangulo
          context.fillStyle = "rgba(0, 0, 200, 0.2)";//cor do preenchimento
          context.fillRect (0, 0, 128, 128);//background
          context.strokeStyle = "#FF0000";//cor da borda
          context.strokeRect(0,0,128,128);//borda

        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="icon" width="128" height="128"></canvas>
  </body>
</html>

retangulo em canvas

O canvas só suporta diretamente retângulos e texto, para o resto é necessário um “path”, usamos beginPath() para iniciar e closePath() para terminar, só então dá pra desenhar com o stroke() ou o fill().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function draw(){
  var canvas = document.getElementById('icon');
  if (canvas.getContext){
    var context = canvas.getContext('2d');

    //retangulo
    context.strokeStyle = "red";
    context.strokeRect(0,0,128,128);

    //circulo
    context.fillStyle = "rgba(241, 178, 21, 0.3)";
    context.strokeStyle = "blue";
    context.beginPath();
    var x = 64;   // = 128/2 - centraliza o circulo
    var y = 64;
    var radius = 64;  //raio do circulo = diametro/2
    var anticlockwise = true;
    var startAngle = 0;     //inicia o arco na posição 0 graus (direita)
    var endAngle = Math.PI*2; //termina o arco na posição 360 graus (volta completa)
    context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
    context.closePath();
    context.stroke(); //desenha a borda
    context.fill();   //preenche

  }
}

circulo em canvas

Como a extensão que eu estava fazendo envolvia caracteres utf-8, resolvi economizar no desenho e usar uma estrela em utf mesmo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
  <head>
    <meta charset="utf-8">
    <title>Canvas tutorial</title>

    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('icon');
        if (canvas.getContext){
          var context = canvas.getContext('2d');

          //circulo
          context.fillStyle = "rgba(241, 178, 21, 0.3)";
          context.strokeStyle = "blue";
          context.beginPath();
          context.arc(64, 64, 64, 0, Math.PI*2, true);
          context.closePath();
          context.stroke();
          context.fill();


          //texto
          context.strokeStyle = "rgba(2, 93, 198, 1)";
          context.fillStyle = "rgba(2, 93, 198, 0.9)";
          context.font = 'italic bold 146px sans-serif';
          context.fillText("✪", 3, 117);//aqui ñ encontrei uma fórmula para x,y e o tamanho da fonte

        }
      }
    </script>
  </head>
  <body onload="draw();">
    <canvas id="icon" width="128" height="128"></canvas>
  </body>
</html>

texto em canvas

Repare que além dos métodos para incluir o texto na imagem foi necessário incluir “<meta charset=”utf-8″>” para o caracter aparecer corretamente.

Só que ficou meio normal demais esse ícone. ¿Que tal brincar um pouco com os ângulos do arc?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//texto
context.strokeStyle = "rgba(2, 93, 198, 1)";
context.fillStyle = "rgba(2, 93, 198, 0.9)";
context.font = 'italic bold 146px sans-serif';
context.fillText("✪", 3, 117);


//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.beginPath();
var startAngle = (Math.PI*3.78)/2;//comeca um pouco acima do 0
var endAngle = Math.PI+(Math.PI*3.42)/2;//termina no sudoeste
context.arc(64,64,64,startAngle,endAngle,true);
context.closePath();
context.fill();

angulos em canvas

Tá, mas até agora o desenho só apareceu no navegador, se tentar salvar vai baixar o fonte e não a imagem! Para criar um png do canvas o método é canvas.toDataURL()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//texto
context.strokeStyle = "rgba(2, 93, 198, 1)";
context.fillStyle = "rgba(2, 93, 198, 0.9)";
context.font = 'italic bold 146px sans-serif';
context.fillText("✪", 3, 117);
//circulo
context.fillStyle = "rgba(241, 178, 21, 0.3)";
context.beginPath();
var startAngle = (Math.PI*3.78)/2;
var endAngle = Math.PI+(Math.PI*3.42)/2;
context.arc(64,64,64,startAngle,endAngle,true);
context.closePath();
context.fill();


//criar imagem png
window.open(canvas.toDataURL());

Vai tentar abrir um popup, não esqueça de liberar.

Por hoje é só pessoal!!

Para saber mais sobre canvas:
https://developer.mozilla.org/en/Canvas_tutorial

Se tiver curiosidade segue o link para a extensão utf-8:
Firefox: https://addons.mozilla.org/en-US/firefox/addon/242192/
Chrome: https://chrome.google.com/extensions/detail/fcemphgmjnjpmmdhcedhjiegickfbiia