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

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

Aussi, quel est le «contexte» du canevas que je continue à lire?

Cela vaut peut-être la peine de regarder un tutoriel: Tutoriel Firefox Canvas

Vous pouvez obtenir la largeur et la hauteur d'un élément de canevas simplement en accédant à 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 width et height ne sont pas présents dans l'élément canvas, la taille par défaut 300x150 sera renvoyé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 de déstructuration d'objet plus courte:

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

Le contextest un objet que vous obtenez du canevas pour vous permettre d'y dessiner. Vous pouvez considérer le contextcomme l'API du canevas, qui vous fournit les commandes qui vous permettent de dessiner sur l'élément canevas.

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 DOIT définir canvas.width et height lorsqu'il est redimensionné.

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

<canvas width="500" height="200">

Si vous dimensionnez le canevas avec CSS, ses dimensions DOM sont accessibles via .scrollWidthet .scrollHeight:

var canvasElem = document.querySelector('canvas');
document.querySelector('#dom-dims').innerHTML = 'Canvas DOM element width x height: ' +
      canvasElem.scrollWidth +
      ' x ' +
      canvasElem.scrollHeight

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

canvasContext.fillStyle = "#00A";
canvasContext.fillText("Distorted", 0, 10);

<p id="dom-dims"></p>
<p id="internal-dims"></p>
<canvas style="width: 100%; height: 123px; border: 1px dashed black">

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

Si vous souhaitez obtenir la largeur et la hauteur, vous pouvez simplement utiliser les attributs HTML standard widthet height:

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

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

À partir de 2015, tous les navigateurs (principaux?) semblent autoriser c.widthet c.heightobtenir la taille interne du canevas , mais:

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

Le "html" laisse dire largeur / hauteur CSS et sa propre largeur / hauteur (attribut-)

regardez ce court exemple de tailles différentes , où j'ai mis un canevas 200/200 dans un élément html 300/100

Avec la plupart des exemples (tout ce que j'ai vu), il n'y a pas de jeu de taille css, donc ils impliquent la largeur et la hauteur de la taille de la toile (dessin-). Mais ce n'est pas un must, et peut produire des résultats amusants, si vous prenez la mauvaise taille - ie. css largeur / hauteur pour le positionnement intérieur.

Aucun de ceux-ci n'a fonctionné pour moi. Essaye ça.

console.log($(canvasjQueryElement)[0].width)

Voici un CodePen qui utilise canvas.height / width, CSS height / width et context pour rendre correctement n'importe quel canevas de n'importe quelle taille .

HTML:

<button onclick="render()">Render</button>
<canvas id="myCanvas" height="100" width="100" style="object-fit:contain;"></canvas>

CSS:

canvas {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  display: block;
}

Javascript:

const myCanvas = document.getElementById("myCanvas");
const originalHeight = myCanvas.height;
const originalWidth = myCanvas.width;
render();
function render() {
  let dimensions = getObjectFitSize(
    true,
    myCanvas.clientWidth,
    myCanvas.clientHeight,
    myCanvas.width,
    myCanvas.height
  );
  myCanvas.width = dimensions.width;
  myCanvas.height = dimensions.height;

  let ctx = myCanvas.getContext("2d");
  let ratio = Math.min(
    myCanvas.clientWidth / originalWidth,
    myCanvas.clientHeight / originalHeight
  );
  ctx.scale(ratio, ratio); //adjust this!
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.stroke();
}

// adapted from: https://www.npmjs.com/package/intrinsic-scale
function getObjectFitSize(
  contains /* true = contain, false = cover */,
  containerWidth,
  containerHeight,
  width,
  height
) {
  var doRatio = width / height;
  var cRatio = containerWidth / containerHeight;
  var targetWidth = 0;
  var targetHeight = 0;
  var test = contains ? doRatio > cRatio : doRatio < cRatio;

  if (test) {
    targetWidth = containerWidth;
    targetHeight = targetWidth / doRatio;
  } else {
    targetHeight = containerHeight;
    targetWidth = targetHeight * doRatio;
  }

  return {
    width: targetWidth,
    height: targetHeight,
    x: (containerWidth - targetWidth) / 2,
    y: (containerHeight - targetHeight) / 2
  };
}

Fondamentalement, canvas.height / width définit la taille du bitmap sur lequel vous effectuez le rendu. La hauteur / largeur CSS met ensuite le bitmap à l'échelle pour l'adapter à l'espace de mise en page (souvent en le déformant à mesure qu'il le met à l'échelle). Le contexte peut ensuite modifier son échelle pour dessiner, à l'aide d'opérations vectorielles, à différentes tailles.

J'ai eu un problème car mon canevas était à l'intérieur d'un conteneur sans ID, j'ai donc utilisé ce code jquery ci-dessous

$('.cropArea canvas').width()