La etiqueta CANVAS es usada para contener gráficos en paginas web. Deberás usar JavaScript para hacer los gráficos. La mayoría de navegadores ya esta soportado esta etiqueta.
Fue introducido inicialmente por Apple para el MAC OS X Dashboard y luego implementado por Safari y Google Chrome.
El tamaño por defecto del CANVAS es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo CONVAS se usa un objeto de contexto de JavaScript que crea gráficos sobre la marcha.
<canvas id=dib1 width=200 height=100></canvas>
El tamaño por defecto es de 300px x 150px
Siempre asigna un id para poder hacerle referencia y puedes ponerle un estilo CSS, como borde.
var c = document.getElementById("graf1");
var ctx = c.getContext("2d");
ctx.moveTo(10,10);
ctx.lineTo(190,90);
ctx.stroke();
var c = document.getElementById("graf2");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
var c = document.getElementById("graf3");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hola Mundo",10,50);
var c = document.getElementById("graf4");
var ctx = c.getContext("2d");
//Crear gradiente
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//Rellena gradiente
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
var c = document.getElementById("graf5");
var ctx = c.getContext("2d");
//Crear gradiente
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
//Rellena gradiente
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
<canvas id=graf6 width=200 height=100 Style="border:1px solid navy"></canvas>
<Script>
var c = document.getElementById("graf6");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
</Script>