Para dibujar rectángulos disponemos del método strokeRect. Dispone de cuatro parámetros, los dos primeros indican la columna y fila inicial del rectángulo y los otros dos representan el ancho y alto en píxeles.
El método strokeRect es afectado por la propiedad strokeStyle. Solo se pinta el perímetro del rectángulo indicado.
Dibujaremos un rectángulo ubicado en la columna 50 y fila 10 con un ancho de 200 píxeles y 100 píxeles de altura:
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script type="text/javascript">
function retornarLienzo(x) {
var canvas = document.getElementById(x);
if (canvas.getContext) {
var lienzo = canvas.getContext("2d");
return lienzo;
} else
return false;
}
function dibujar() {
var lienzo=retornarLienzo("lienzo1");
if (lienzo) {
lienzo.strokeStyle = "rgb(0,0,255)";
lienzo.strokeRect(50,10,200,100);
}
}
</script>
</head>
<body onLoad="dibujar()">
<canvas id="lienzo1" width="300" height="300">
Su navegador no permite utilizar canvas.
</canvas>
</body>
</html>
El resultado en el navegador al cargar esta página es:
Activamos el color azul y dibujamos inmediatamente el rectángulo:
lienzo.strokeStyle = "rgb(0,0,255)";
lienzo.strokeRect(50,10,200,100);