Método HTML canvas rect()

Definição e uso

rect() O método cria um retângulo.

Dica:Use stroke() ou fill() O método desenha um retângulo real no canvas.

Instância

Exemplo 1

Desenhe um retângulo de 150x100 pixels:

Seu navegador não suporta a tag HTML5 canvas.

JavaScript:

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

Experimente você mesmo

Sintaxe

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

Valor do parâmetro

Parâmetro Descrição
x Coordenada x do canto superior esquerdo do retângulo.
y Coordenada y do canto superior esquerdo do retângulo.
width Largura do retângulo, em pixels.
height Altura do retângulo, em pixels.

Mais exemplos

Exemplo 2

Crie três retângulos usando o método rect():

Seu navegador não suporta a tag HTML5 canvas.

JavaScript:

JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Retângulo vermelho
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="red";
ctx.rect(5,5,290,140);
ctx.stroke();
// Retângulo verde
ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();
// Retângulo azul
ctx.beginPath();
ctx.lineWidth="10";
ctx.strokeStyle="blue";
ctx.rect(50,50,150,80);
ctx.stroke();

Experimente você mesmo

Suporte do navegador

Os números na tabela indicam a versão do navegador que suportou a propriedade pela primeira vez.

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

Observação:Os navegadores Internet Explorer 8 e anteriores não suportam o elemento <canvas>.