Bagaimana cara mendapatkan lebar dan tinggi kanvas HTML5?

Bagaimana saya bisa mendapatkan lebar dan tinggi elemen kanvas di JavaScript?

Juga, apa "konteks" dari kanvas yang terus saya baca?

Mungkin ada baiknya melihat tutorial: Tutorial Kanvas Firefox

Anda bisa mendapatkan lebar dan tinggi elemen kanvas hanya dengan mengakses properti elemen tersebut. Sebagai contoh:

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

Jika atribut width dan height tidak ada dalam elemen kanvas, ukuran default 300x150 akan dikembalikan. Untuk mendapatkan lebar dan tinggi yang benar secara dinamis gunakan kode berikut:

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

Atau menggunakan sintaks penghancur objek yang lebih pendek:

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

Ini contextadalah objek yang Anda dapatkan dari kanvas untuk memungkinkan Anda menggambar ke dalamnya. Anda bisa menganggapnya contextsebagai API ke kanvas, yang memberi Anda perintah yang memungkinkan Anda menggambar di elemen kanvas.

Nah, semua jawaban sebelumnya tidak sepenuhnya benar. 2 dari browser utama tidak mendukung 2 properti tersebut (IE adalah salah satunya) atau menggunakannya secara berbeda.

Solusi yang lebih baik (didukung oleh sebagian besar browser, tetapi saya tidak memeriksa Safari):

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

Setidaknya saya mendapatkan nilai yang benar dengan scrollWidth dan -Height dan HARUS mengatur canvas.width dan height saat ukurannya diubah.

Jawaban yang menyebutkan canvas.widthmengembalikan dimensi internal kanvas, yaitu yang ditentukan saat membuat elemen:

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

Jika Anda mengukur kanvas dengan CSS, dimensi DOM-nya dapat diakses melalui .scrollWidthdan .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">

Objek konteks memungkinkan Anda untuk memanipulasi kanvas; Anda bisa menggambar persegi panjang misalnya dan banyak lagi.

Jika Anda ingin mendapatkan lebar dan tinggi, Anda cukup menggunakan atribut HTML standar widthdan height:

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

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

sekarang mulai tahun 2015 semua browser (utama?) tampaknya rendah c.widthdan c.heightmendapatkan ukuran internal kanvas , tetapi:

pertanyaan sebagai jawaban menyesatkan, karena kanvas pada prinsipnya memiliki 2 ukuran berbeda / independen.

"Html" katakanlah lebar / tinggi CSS dan lebar / tingginya (atribut-)

lihat contoh singkat tentang ukuran yang berbeda ini , di mana saya meletakkan kanvas 200/200 ke dalam elemen 300/100 html

Dengan sebagian besar contoh (semua yang saya lihat) tidak ada set ukuran css, jadi ini mengimplikasikan lebar dan tinggi dari ukuran kanvas (gambar-). Tetapi itu bukanlah suatu keharusan, dan dapat menghasilkan hasil yang lucu, jika Anda mengambil ukuran yang salah - mis. css widht / height untuk posisi dalam.

Tidak ada yang berhasil untuk saya. Coba ini.

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

Berikut adalah CodePen yang menggunakan canvas.height / width, CSS height / width, dan konteks untuk merender kanvas dengan benar dalam ukuran berapa pun .

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

Pada dasarnya, canvas.height / width mengatur ukuran bitmap yang Anda render. Tinggi / lebar CSS kemudian menskalakan bitmap agar sesuai dengan ruang tata letak (sering kali membelokkannya saat menskalakannya). Konteks kemudian dapat memodifikasi skalanya untuk digambar, menggunakan operasi vektor, pada ukuran yang berbeda.

Saya mengalami masalah karena kanvas saya berada di dalam wadah tanpa ID jadi saya menggunakan kode jquery di bawah ini

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