Desenhando com a tag canvas em HTML5

A maioria das pessoas (inclusivo programadores front end) vê alguma aplicação onde é possível desenhar e pensa que é algo do capeta, complexo e precisa de 1 ano pra fazer, mas provavelmente ninguém nunca tentou. É simples!

Obviamente precisa de um belo work-around pra funcionar em interfaces touch e o pior, versões antigas de IE. Mas a ideia em si é simples, basicamente no mousemove em cima do canvas você escreve uma linha com o LineTo, veja abaixo como ficou:

Bom, vamos aos códigos:

HTML

Criando a tag canvas e deixando uma mensagem caso o usuário não tenho um browser compatível com HTML5.

<canvas id="canvas" class="canvas" width="400" height="400">
    Seu browser não suporta canvas, é hora de trocar!.
</canvas>

Javascript

São só 29 linhas (bem indentadas e organizadas) de javascript

var Draw = {
	obj : document.getElementById('canvas'),
	contexto : document.getElementById('canvas').getContext("2d"),
	_init:function(){
		Draw.obj.onmousemove = Draw._over;
		Draw.obj.onmousedown = Draw._ativa;
		Draw.obj.onmouseup = Draw._inativa;
		Draw.obj.onselectstart = function () { return false; };
	},
	_over:function(e){
		if(!Draw.ativo) return;
		Draw.contexto.beginPath();
		Draw.contexto.lineTo(Draw.x,Draw.y);
		Draw.contexto.lineTo(e.layerX, e.layerY);
		Draw.contexto.stroke();
		Draw.contexto.closePath();
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_ativa:function(e){
		Draw.ativo = true;
		Draw.x = e.layerX;
		Draw.y = e.layerY;
	},
	_inativa:function(){
		Draw.ativo = false;
	}
}
Draw._init();

CSS

Basicamente, é adicionar o cursor no elemento Canvas

#canvas{ cursor: url("../img/pencil.gif"), default; }

Então, não parece tão complicado, parece?

[]s,

TidBits