Come ottengo la larghezza e l'altezza di una tela HTML5?

Come posso ottenere la larghezza e l'altezza dell'elemento canvas in JavaScript?

Inoltre, qual è il "contesto" della tela di cui continuo a leggere?

Potrebbe valere la pena guardare un tutorial: Firefox Canvas Tutorial

È possibile ottenere la larghezza e l'altezza di un elemento canvas semplicemente accedendo alle proprietà dell'elemento. Per esempio:

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

Se gli attributi width e height non sono presenti nell'elemento canvas, verrà restituita la dimensione predefinita 300x150. Per ottenere dinamicamente la larghezza e l'altezza corrette, utilizzare il codice seguente:

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

O usando la sintassi di destrutturazione dell'oggetto più breve:

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

Il contextè un oggetto che si ottiene dalla tela per consentire di disegnare in esso. Puoi pensare contextall'API del canvas, che ti fornisce i comandi che ti consentono di disegnare sull'elemento canvas.

Ebbene, tutte le risposte precedenti non sono del tutto corrette. 2 dei principali browser non supportano queste 2 proprietà (IE è una di queste) o le utilizzano in modo diverso.

Soluzione migliore (supportata dalla maggior parte dei browser, ma non ho controllato Safari):

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

Almeno ottengo valori corretti con scrollWidth e -Height e DEVE impostare canvas.width e height quando viene ridimensionato.

Le risposte citate canvas.widthrestituiscono le dimensioni interne del canvas, ovvero quelle specificate durante la creazione dell'elemento:

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

Se ridimensionate la tela con CSS, le sue dimensioni DOM sono accessibili tramite .scrollWidthe .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'oggetto contesto ti permette di manipolare la tela; puoi disegnare rettangoli per esempio e molto altro ancora.

Se vuoi ottenere la larghezza e l'altezza, puoi semplicemente utilizzare gli attributi HTML standard widthe height:

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

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

ora, a partire dal 2015, tutti i browser (principali?) sembrano funzionare c.widthe c.heightottenere le dimensioni interne della tela , ma:

la domanda come le risposte sono fuorvianti, perché la tela ha in linea di principio 2 dimensioni diverse / indipendenti.

L '"html" consente di dire larghezza / altezza CSS e la sua larghezza / altezza (attributo)

guarda questo breve esempio di dimensioni diverse , in cui ho inserito una tela 200/200 in un elemento html 300/100

Con la maggior parte degli esempi (tutti quelli che ho visto) non esiste un set di dimensioni CSS, quindi questi ottengono implizit la larghezza e l'altezza della dimensione della tela (del disegno). Ma questo non è un must e può produrre risultati divertenti, se prendi la taglia sbagliata, ad es. css larghezza / altezza per il posizionamento interno.

Nessuno di questi ha funzionato per me. Prova questo.

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

Ecco un CodePen che utilizza canvas.height / width, CSS height / width e context per eseguire correttamente il rendering di qualsiasi canvas di qualsiasi dimensione .

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
  };
}

Fondamentalmente, canvas.height / width imposta la dimensione della bitmap su cui stai eseguendo il rendering. L'altezza / larghezza CSS quindi ridimensiona la bitmap per adattarla allo spazio del layout (spesso deformandola mentre la ridimensiona). Il contesto può quindi modificare la sua scala per disegnare, utilizzando operazioni vettoriali, a dimensioni diverse.

Ho avuto un problema perché la mia tela era all'interno di un contenitore senza ID, quindi ho usato questo codice jquery di seguito

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