Kanvas direntangkan saat menggunakan CSS tetapi normal dengan properti "lebar" / "tinggi"

Saya memiliki 2 kanvas, yang satu menggunakan atribut HTML widthdan heightuntuk mengukurnya, yang lain menggunakan CSS:

<canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas>
<canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas>

Compteur1 menampilkan seperti seharusnya, tetapi tidak compteur2. Konten diambil menggunakan JavaScript pada kanvas 300x300.

Mengapa ada perbedaan tampilan?

Tampaknya atribut widthdan heightmenentukan lebar atau tinggi sistem koordinat kanvas, sedangkan properti CSS hanya menentukan ukuran kotak di mana ia akan ditampilkan.

Ini dijelaskan di http://www.whatwg.org/html#attr-canvas-width (perlu JS) atau http://www.whatwg.org/c#attr-canvas-width (mungkin akan memakan komputer Anda) :

The canvaselemen memiliki dua atribut untuk mengontrol ukuran bitmap elemen: widthdan height. Atribut-atribut ini, ketika ditentukan, harus memiliki nilai yang bilangan bulat non-negatif yang valid . The aturan untuk parsing bilangan bulat non-negatif harus digunakan untuk mendapatkan nilai-nilai numerik mereka. Jika atribut hilang, atau jika parsing nilainya mengembalikan kesalahan, maka nilai default harus digunakan sebagai gantinya. The widthatribut default untuk 300, dan heightdefault atribut untuk 150.

Untuk mengatur widthdan yang heightAnda butuhkan, Anda dapat menggunakan

canvasObject.setAttribute('width', '475');

Untuk <canvas>elemen, aturan CSS untuk widthdan heightmengatur ukuran aktual elemen kanvas yang akan ditarik ke halaman. Di sisi lain, atribut HTML widthdan heightatur ukuran sistem koordinat atau 'kisi' yang akan digunakan kanvas API.

Sebagai contoh, pertimbangkan ini ( jsfiddle ):

var ctx = document.getElementById('canvas1').getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 30, 30);

var ctx2 = document.getElementById('canvas2').getContext('2d');
ctx2.fillStyle = "red";
ctx2.fillRect(10, 10, 30, 30);

canvas {
  border: 1px solid black;
}

<canvas id="canvas1" style="width: 50px; height: 100px;" height="50" width="100"></canvas>
<canvas id="canvas2" style="width: 100px; height: 100px;" height="50" width="100"></canvas>

Keduanya memiliki hal yang sama tergambar pada mereka relatif terhadap koordinat internal elemen kanvas. Tetapi di kanvas kedua, persegi panjang merah akan dua kali lebih lebar karena kanvas secara keseluruhan direntangkan melintasi area yang lebih besar oleh aturan CSS.

Catatan: Jika aturan CSS untuk widthdan / atau heighttidak ditentukan maka browser akan menggunakan atribut HTML untuk mengukur elemen sehingga 1 unit dari nilai-nilai ini sama dengan 1px pada halaman. Jika atribut ini tidak ditentukan maka mereka akan default ke widthdari 300dan heightdari 150.

Kanvas akan ditarik jika Anda mengatur lebar dan tinggi di CSS Anda. Jika Anda ingin memanipulasi dimensi kanvas secara dinamis, Anda harus menggunakan JavaScript seperti:

canvas = document.getElementById('canv');
canvas.setAttribute('width', '438');
canvas.setAttribute('height', '462');

Browser menggunakan lebar dan tinggi css, tetapi elemen kanvas bersisik berdasarkan lebar dan tinggi kanvas. Dalam javascript, baca lebar dan tinggi css dan atur lebar kanvas untuk itu.

var myCanvas = $('#TheMainCanvas');
myCanvas[0].width = myCanvas.width();
myCanvas[0].height = myCanvas.height();

Koreksi shannimal

var el = $('#mycanvas');
el.attr('width', parseInt(el.css('width')))
el.attr('height', parseInt(el.css('height')))

CSS menetapkan lebar dan tinggi elemen kanvas sehingga memengaruhi ruang koordinat sehingga semua yang digambar miring

Inilah cara saya tentang cara mengatur lebar dan tinggi dengan Vanilla JavaScript

canvas.width = numberForWidth

canvas.height = numberForHeight

Jika Anda menginginkan perilaku dinamis berdasarkan, misalnya kueri media CSS, jangan gunakan atribut lebar dan tinggi kanvas. Gunakan aturan CSS dan kemudian, sebelum mendapatkan konteks render kanvas, tetapkan untuk atribut width dan height lebar dan tinggi gaya CSS:

var elem = document.getElementById("mycanvas");

elem.width = elem.style.width;
elem.height = elem.style.height;

var ctx1 = elem.getContext("2d");
...