Introdução ao canvas em JavaScript
Canvas é uma área de desenho especial
no navegador usando JavaScript. Esta área é criada
com a tag <canvas>, para a qual
devemos especificar uma largura e altura:
<canvas width="200" height="200"></canvas>
Para trabalhar com esta área em JavaScript, primeiro obtemos uma referência a esta tag em uma variável:
let canvas = document.querySelector('canvas');
Em seguida, devemos aplicar o método
getContext a esta variável:
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
Podemos simplificar:
let ctx = document.querySelector('canvas').getContext('2d');
Como resultado, a variável ctx irá conter
um objeto que contém o chamado
contexto de renderização. Todo o desenho
será feito usando os métodos deste
objeto. Vamos estudá-los nas próximas
lições.
