canvas-hola.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>dibujar canvas</title>
</head>
<body>
	

<canvas id='hola' width='130px' height='100px' style='border:1px solid black'>
	
</canvas>


<script type='text/javascript'>
	
var c=document.getElementById('hola');
var cxt=c.getContext('2d');

// dibujar

cxt.moveTo(10,10);  //posicion
cxt.lineTo(10,90); // dibujar la linea dentro de el parametro ya mencionados arriba
cxt.lineTo(10,50);
cxt.lineTo(30,50);
cxt.lineTo(30,10);
cxt.lineTo(30,90);

// ya dibujamos la h

cxt.moveTo(40,10);  //posicion pixel
cxt.lineTo(40,90);
cxt.lineTo(60,90);
cxt.lineTo(60,10);
cxt.lineTo(40,10);


cxt.moveTo(70,10);
cxt.lineTo(70,90);
cxt.lineTo(90,90);


cxt.moveTo(100,90);
cxt.lineTo(100,10);
cxt.lineTo(120,10);
cxt.lineTo(120,90);
cxt.lineTo(120,50); // volver atras
cxt.lineTo(100,50);






// x cresen hacia la derecha
// y hacia abajo
cxt.stroke();

</script>







</body>
</html>