Wie erhalte ich die Breite und Höhe einer HTML5-Zeichenfläche?

Wie kann ich die Breite und Höhe des Canvas-Elements in JavaScript ermitteln?

Was ist auch der "Kontext" der Leinwand, über die ich immer wieder lese?

Es könnte sich lohnen, sich ein Tutorial anzusehen: Firefox Canvas Tutorial

Sie können die Breite und Höhe eines Canvas-Elements ermitteln, indem Sie einfach auf diese Eigenschaften des Elements zugreifen. Beispielsweise:

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

Wenn die Attribute width und height im Canvas-Element nicht vorhanden sind, wird die Standardgröße 300 x 150 zurückgegeben. Verwenden Sie den folgenden Code, um dynamisch die richtige Breite und Höhe zu erhalten:

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

Oder verwenden Sie die kürzere Objektzerstörungssyntax:

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

Dies contextist ein Objekt, das Sie von der Leinwand erhalten, damit Sie hinein zeichnen können. Sie können sich das contextals API für die Zeichenfläche vorstellen, die Ihnen die Befehle zur Verfügung stellt, mit denen Sie auf das Zeichenflächenelement zeichnen können.

Nun, alle Antworten zuvor sind nicht ganz richtig. 2 der gängigen Browser unterstützen diese beiden Eigenschaften nicht (IE ist eine davon) oder verwenden sie anders.

Bessere Lösung (wird von den meisten Browsern unterstützt, aber ich habe Safari nicht überprüft):

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

Zumindest erhalte ich korrekte Werte mit scrollWidth und -Height und MUSS canvas.width und height festlegen, wenn die Größe geändert wird.

Die genannten Antworten canvas.widthgeben die internen Abmessungen der Zeichenfläche zurück, dh die beim Erstellen des Elements angegebenen:

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

Wenn Sie die Leinwand mit CSS Größe, sind seine DOME Dimensionen erreichbar über .scrollWidthund .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">

Mit dem Kontextobjekt können Sie die Zeichenfläche bearbeiten. Sie können zum Beispiel Rechtecke und vieles mehr zeichnen.

Wenn Sie die Breite und Höhe erhalten möchten, können Sie einfach die Standard-HTML-Attribute verwenden widthund height:

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

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

Ab 2015 scheinen alle (Haupt-?) Browser zuzulassen c.widthund c.heightdie interne Größe der Leinwand zu erhalten , aber:

Die Frage als Antwort ist irreführend, da die Leinwand grundsätzlich 2 verschiedene / unabhängige Größen hat.

Das "HTML" sagt CSS Breite / Höhe und seine eigene (Attribut-) Breite / Höhe

Schauen Sie sich dieses kurze Beispiel für eine andere Größe an , bei dem ich eine 200/200-Zeichenfläche in ein 300/100-HTML-Element eingefügt habe

Bei den meisten Beispielen (alles, was ich gesehen habe) gibt es keine CSS-Größe, so dass diese die Breite und Höhe der (Zeichnungs-) Leinwandgröße implizit erhalten. Aber das ist kein Muss und kann zu lustigen Ergebnissen führen, wenn Sie die falsche Größe wählen - dh. CSS-Breite / Höhe für die innere Positionierung.

Keiner von denen hat für mich gearbeitet. Versuche dies.

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

Hier ist ein CodePen, der canvas.height / width, CSS height / width und context verwendet, um jede Leinwand in jeder Größe korrekt zu rendern .

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

Grundsätzlich legt canvas.height / width die Größe der Bitmap fest, auf die Sie rendern. Die CSS-Höhe / Breite skaliert dann die Bitmap, um sie an den Layoutbereich anzupassen (häufig wird sie beim Skalieren verzerrt). Der Kontext kann dann seine Skalierung ändern, um mithilfe von Vektoroperationen unterschiedliche Größen zu zeichnen.

Ich hatte ein Problem, weil sich meine Leinwand in einem Container ohne ID befand, also habe ich diesen unten stehenden Abfragecode verwendet

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