A tag CANVAS é basicamente uma tela para desenho.
Menasgem para quando o navegador não suportar HTML5
Com o JavaScript pode-se obter a tela, dai será nescessário um objeto Context para desenhar nesta tela:
var canvas = document.getElementById('canvas1');
var context = canvas.getContext('2d');
context.moveTo(0,0);
context.lineTo(50,50);
context.stroke();
Resultado:
Principais funções:
moveTo(int x, int y); //Move para as cordenadas indicadas
lineTo(int x, int y); //Desenha uma linhas do ponto inicial definido por "moveTo" ate o pondo indicado nos valores de X e Y
stroke(); //Imprime o senho na tela
fillRect(int x, int y, int width, int height); //Desenha um retângulo, onde X e Y indica o posicionamento e Width e Height indicam o tamanho do retângulo
arc(int x, int y, int radius,double start, double end); //Desenha um arco onde X e Y indica o posicionamento do centro do arco, Radius é o raio , Start indica onde o arco deve iniciar, o valor 0(zero) é a posiçao de 3(três) horas no relógio e vai ate Math.PI (3.14), End é o fim do arco, desta forma para desenhar um círculo, usa-se 0 para Start e 3.14 (Math.PI) para End
Abaixo você pode ver um exemplo de uma animação que renderiza um relogio em uma tag <CANVAS>
Seu navegador não suporta HTML5
Fonte: developer.mozilla.org