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

Aucune de ces solutions n'a fonctionné pour moi. Essayez ceci.

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

Answer 2

Voici un CodePen qui utilise canvas.height/largeur, la hauteur/largeur CSS, et le contexte pour afficher correctement n'importe quel canvas à n'importe quelle taille.

HTML :

Afficher

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); //ajuster ici!
  ctx.beginPath();
  ctx.arc(50, 50, 50, 0, 2 * Math.PI);
  ctx.stroke();
}

// adapté de : 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
  };
}

Essentiellement, canvas.height/largeur définit la taille de la bitmap que vous affichez. La hauteur/largeur CSS redimensionne ensuite la bitmap pour s'adapter à l'espace de mise en page (souvent avec une distorsion lors de la mise à l'échelle). Le contexte peut ensuite modifier son échelle pour dessiner, en utilisant des opérations vectorielles, à des tailles différentes.