Com o advento da versão 5 da linguagem de marcação HTML, a qual é utilizada para estruturar os conteúdos da web houve a inclusão de um novo elemento: CANVAS. O elemento CANVAS é uma tentativa de substituir tecnologias ultrapassadas de desenho em “2d” e “3d”, especialmente tecnologias proprietárias como o Adobe Flash. A ideia deste trabalho é explorar algumas funcionalidades práticas e teóricas do elemento CANVAS. Do ponto de vista prático um elemento CANVAS pode ser entendido como uma área de desenho (um container sem muitos atributos ou especificidades) sendo que toda a lógica para “desenhar” é programada através de um linguagem de programação JavaScript. Os comandos para realizar os desenhos exigem um bom conhecimento de geometria plana e matemática básica. O CANVAS prevê dois contextos de criação: o contexto bidimensional e o contexto tridimensional. O contexto bidimensional destina-se à criação de imagens em duas dimensões: X e Y, segundo um sistema de eixos cartesianos, cuja origem é no canto superior esquerdo, com as coordenadas X crescendo da esquerda para direita e Y de cima para baixo. O contexto tridimensional destina-se à criação de imagens em três dimensões com a adição do eixo Z no sentido da profundidade. Para demonstrar o funcionamento do elemento CANVAS serão desenvolvidas três aplicações web. A primeira delas irá ilustrar um relógio analógico cujos ponteiros são movimentados através de códigos executados em um determinado ciclo de tempo. O segundo exemplo consiste na aplicação de uma função matemática para traçar uma linha no plano cartesiano a partir de valores informados pelo usuário. Por fim será apresentado o protótipo de um jogo onde o usuário deverá desviar e alguns obstáculos que se movimentam na tela. Espera-se com este trabalho divulgar as possibilidades do elemento Canvas para a construção de animações baseadas em web.

Referências bibliograficas:

FLANAGAN, D. (2013). Java Script: O guia definitivo. 6ª ed. Porto Alegre: Bookman.

LANHELLAS, R. HTML5 Canvas com JavaScript. Disponível em https://www.devmedia.com.br/html5-canvas-com-javascript/29866, acesso em Agosto/2019.

SILVA, M. S. Fundamentos de HTML5 e CSS3. Editora Novatec, 2015.