Comment puis-je obtenir la largeur et la hauteur d'un canevas HTML5 ?

Question

Comment puis-je obtenir la largeur et la hauteur de l'élément canvas en JavaScript ?

Aussi, de quoi s'agit-il du "contexte" du canvas dont je lis souvent ?

Answer 1

Il pourrait être utile de consulter un tutoriel: Tutoriel Canvas MDN

Vous pouvez obtenir la largeur et la hauteur d'un élément canvas en accédant simplement à ces propriétés de l'élément. Par exemple:

var canvas = document.getElementById('mycanvas');
var width = canvas.width;
var height = canvas.height;

Si les attributs de largeur et de hauteur ne sont pas présents dans l'élément canvas, la taille par défaut de 300x150 sera retournée. Pour obtenir dynamiquement la largeur et la hauteur correctes, utilisez le code suivant:

const canvasW = canvas.getBoundingClientRect().width;
const canvasH = canvas.getBoundingClientRect().height;

Ou en utilisant la syntaxe plus courte de la déstructuration d'objet:

const { width, height } = canvas.getBoundingClientRect();

Le contexte est un objet que vous obtenez du canvas pour vous permettre de dessiner dedans. Vous pouvez penser au contexte comme à l'API du canvas, qui vous fournit les commandes vous permettant de dessiner sur l'élément canvas.

Answer 2

Eh bien, toutes les réponses précédentes ne sont pas entièrement correctes. 2 des principaux navigateurs ne prennent pas en charge ces 2 propriétés (IE en fait partie) ou les utilisent différemment.

Meilleure solution (prise en charge par la plupart des navigateurs, mais je n'ai pas vérifié Safari) :

var canvas = document.getElementById('mycanvas');
var width = canvas.scrollWidth;
var height = canvas.scrollHeight;

Au moins, j'obtiens des valeurs correctes avec scrollWidth et -Height et DOIS définir canvas.width et height quand il est redimensionné.

Answer 3

Les réponses mentionnant canvas.width renvoient aux dimensions internes du canvas, c'est-à-dire celles spécifiées lors de la création de l'élément :

Si vous redimensionnez le canvas avec du CSS, ses dimensions DOM sont accessibles via .scrollWidth et .scrollHeight :

var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Largeur x hauteur de l\'élément DOM du canvas : ' +
      canvasElem.scrollWidth +
      ' x ' +
      canvasElem.scrollHeight

var canvasContext = canvasElem.getContext('2d');
document.querySelector('#internal-dims').innerHTML = 'Largeur x hauteur internes du canvas : ' +
      canvasContext.canvas.width +
      ' x ' +
      canvasContext.canvas.height;

canvasContext.fillStyle = "#00A";
canvasContext.fillText("Déformé", 0, 10);

Answer 4

L'objet de contexte vous permet de manipuler le canvas; vous pouvez par exemple dessiner des rectangles et bien plus encore.

Si vous voulez obtenir la largeur et la hauteur, vous pouvez simplement utiliser les attributs HTML standards width et height:

var canvas = document.getElementById( 'yourCanvasID' );
var ctx = canvas.getContext( '2d' );

alert( canvas.width );
alert( canvas.height );

Answer 5

À partir de 2015, tous les navigateurs (majeurs ?) semblent permettre à c.width et c.height d'obtenir la taille interne du canevas, mais :

la question comme les réponses sont trompeuses, car un canevas a en principe 2 tailles différentes / indépendantes.

Le "html" permet de définir la largeur / hauteur CSS et sa propre largeur / hauteur (attribut)

jetez un coup d'œil à cet exemple court de tailles différentes, où j'ai mis un canevas 200/200 dans un élément html 300/100

Avec la plupart des exemples (tous ceux que j'ai vus), aucune taille css n'est définie, donc elles obtiennent implicitement la largeur et la hauteur de la taille du canevas de dessin. Mais ce n'est pas obligatoire et peut produire des résultats amusants si vous prenez la mauvaise taille - c'est-à-dire la largeur / hauteur css pour le positionnement interne.