Méthode : CanvasRenderingContext2D.rect()

Dessine les contours d'un rectangle dans le canvas

Syntaxe
myContext.rect(x, y, largeur, hauteur);

Compatible tous navigateurs

Oui

Description
Dessine les contours d'un rectangle de dimensions largeur et hauteur dans le canvas dont le coin supérieur gauche est en (x, y).
Attention, sans appel à stroke(), rien ne s'affiche.

fillRect() dessine le rectangle et le remplit.

Exemple 1 : Encadre la zone de texte d'un rectangle

Code source

<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var myCanvas=document.getElementById("myCanvas");
var myContext=myCanvas.getContext("2d");

/* Affichage d'un texte */
var txt="My Big Text";
myContext.font="20px arial";
myContext.fillText(txt, 20,100);

/* Encadrement du texte et recherche des dimensions */
var largeur = parseInt(myContext.measureText(txt).width);
var hauteur = 20;
var x = 20;
var y = 100-hauteur;

console.log(x);
console.log(y);
console.log(largeur);
console.log(hauteur);

myContext.strokeStyle="#f00";
myContext.rect(x, y, largeur, hauteur);
myContext.stroke();
</script>

Résultat

Emulation de la console

Explication

Encadre la zone de texte d'un rectangle

Page en rapport
Le tutoriel sur le dessin avec canvas

Page mise à jour le 21/09/2017