de renderizacao, que sao usados para criar e manipular o conteudo exibido e/ou interferido pelo usuario. Em aula estamos trabalhando com a dimensao 2D. Outra dimensao que podemos trabalhar e a 3D; por exemplo, o WebGL usa um contexto 3D, baseado no OpenGL ES.O canvas e incialmente preenchido com um espaco em branco. Para exibir algo, um script precisa acessar a dimensao de renderizacao e desenhar nele. O elemento <canvas> possui um metodo chamado getContext(), usado para obter o contexto de renderizacao e suas funcoes de desenho. O metodo getContext() pede um parametro, o tipo do contexto. Para graficos 2D, como os cobertos por esse artigo, voce deve especificar "2d". var canvas = document.getElementById('tela'); var teste = canvas.getContext('2d');Desenhando Formas com JavaScript e suas renderizacoes!1- A Grid do Canvas:E a area padrao do Canvas, que vem em tamanho de 150x150px. O posicionamento dos elementos desenhados sempre se posicionarao no canto superior esquerdo.2 - Retangulo:Retangulo com preenchimento:fillRect(x, y, width, height)Retangulo com contorno:strokeRect(x, y, width, height)Retangulo com area totalmente transparente:clearRect(x, y, width, height)Exemplo:<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>REC - JS</title><script type="text/javascript">function draw() { var canvas = document.getElementById('canvas'); if (canvas.getContext) { var rec = canvas.getContext('2d'); rec.fillRect(25,25,100,100); rec.clearRect(45,45,60,60); rec.strokeRect(50,50,50,50); }}</script></head><body onload="draw();"> <canvas id="canvas" width="150" height="150">Navegador nao suporta</canvas></body></html>O contexto de renderizacaoO elemento canvas cria uma tela de desenho de tamanho fixo que configura ou expoe um ou mais contextos de renderizacao, que sao usados para criar e manipular o conteudo exibido. No canvas, o contexto da renderizacao (exibicao do conteudo) sera o 2D em funcao do JavaScript que iremos utilizar. Na exibicao 3D (o contexto a ser exibido) utiliza um outro metodo, por assim dizer, o qual chamamos de experimental - WebGL, baseada em OpenGL ES!Quando declaramos o canvas, ele e branco, so com as limitacoes de largura (width) e altura (height) definidas. Para exibir algum conteudo grafico precisamos de um script que acesse o contexto de renderizacao e desenhe sobre ele. Metodo getContext():O elemento <canvas> tem um metodo muito importante chamado getContext(). Este metodo e usado para obter o contexto de renderizacao e suas funcoes de desenho, no caso: 2D. Importante! getContext() recebe o tipo de contexto como parametro. Para graficos 2D, que serao abrangidos nesse tutorial, devera ser especificado "2d".Exemplo!<canvas id="minha_tela" width="200" height="200"></canvas><script> //definicao do canvas e contexto de renderizacao var canvas = document.getElementById('minha_tela'); var context = canvas.getContext('2d'); //desenhar um retangulo context.fillRect(50, 50, 100, 100);</script>Metodo getElementById():Provavelmente o metodo mais utilizado no DOM seja o getElementById. Sua funcao simplesmente retorna o elemento cujo atributo ID foi especificado. Caso o elemento nao exista ou o ID informado seja incorreto ele retornara null.E importante lembrarmos que somente um objeto pode conter um ID especifico, ou seja, nao podem existir dois objetos em uma pagina com o mesmo valor de um atributo ID.Repetindo: o metodo getElementById vai "buscar" o elemento cuja a identificacao foi definida no codigo, tambem podemos dizer que ele retorna o ID determinado, ou no!Comecando a desenhar no Canvas com JavaScriptMetodos: fillRect(); strokeRect();Depois que configuramos o contexto grafico do nosso canvas, podemos entao configurar a visualizacao utilizando metodos de desenho.Para desenhar um retangulo, por exemplo, usamos o metodo fillRect() e,