Introdução

Esta é a primeira parte do Tutorial de Html5 Canvas. Neste vídeo eu falo um pouco sobre o Canvas e dou uma introdução sobre como realizar os primeiros desenhos e como a lógica do Canvas funciona.
No vídeo eu fiz alguns exemplos e a versão final pode ser visualizada abaixo.

Código

O código abaixo diz respeito ao canvas desenhado na imagem acima. Esse código está presente na pasta src_page do repositório deste vídeo (botões no topo da página). O código do vídeo está presente na pasta src do repositório do vídeo.
Note no código abaixo que nas linhas 3 e 4 eu mudei o tamanho do canvas para que o canvas dessa página se adapte a diversos formatos de tela. Na linha 25 também estou colocando um número de esferas baseada no tamanho da tela, para ficar similar em vários tamanhos de tela.

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
36

canvas = document.querySelector("canvas");

canvas.width = document.getElementById("canvas_div").clientWidth;
canvas.height = innerHeight/3;

c = canvas.getContext('2d');

/*Rectangles*/
c.fillStyle='#ff0000';
c.fillRect(100,80,150,200);
c.fillStyle='rgba(0,255,0,0.5)';
c.fillRect(200,100,500,100);
c.fillRect(200,400,350,100);

/*lines*/
c.beginPath();
c.moveTo(50,450);
c.lineTo(700,50);
c.lineTo(500,300);
c.lineTo(700,300);
c.strokeStyle = "#ff0000";
c.stroke();
c.fill();

for (let i=0; i<canvas.width/14; i++) {
    let x = Math.random() * canvas.width;
    let y = Math.random() * canvas.height;

    /*circle*/
    c.beginPath();
    c.strokeStyle = "#0000ff";
    c.arc(x,y,Math.random()*100,0, Math.PI *2);
    c.fillStyle = "rgba(0,0,255,0.4";
    c.stroke();
    c.fill();
}