Método Canvas strokeRect()

Definición y uso

strokeRect() Método para dibujar un rectángulo (sin rellenar). El color predeterminado del trazo es negro.

Consejo:Usa strokeStyle Atributos para establecer el color, el degradado o el patrón del trazo.

Ejemplo

Dibuja un rectángulo de 150*100 píxeles:

Tu navegador no admite la etiqueta HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(20,20,150,100);

Prueba por ti mismo

Sintaxis

context.strokeRect(x,y,width,height);

Valor del parámetro

Parámetro Descripción
x Coordenada x del extremo superior izquierdo del rectángulo.
y Coordenada y del extremo superior izquierdo del rectángulo.
width Ancho del rectángulo, medido en píxeles.
height Altura del rectángulo, en píxeles.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente esta propiedad por primera vez.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Notas:Internet Explorer 8 y versiones anteriores no admiten el elemento <canvas>.