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:

html<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:

javascriptlet canvas = document.querySelector('canvas');

Em seguida, devemos aplicar o método getContext a esta variável:

javascriptlet canvas = document.querySelector('canvas');
let ctx    = canvas.getContext('2d');

Podemos simplificar:

javascriptlet 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.