CSSを使用するとキャンバスは引き伸ばされますが、「幅」/「高さ」プロパティは通常です

私は2つのキャンバスを持っています。1つはHTML属性widthを使用heightし、それをサイズ変更するために、もう1つは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は通常どおりに表示されますが、compteur2は表示されません。コンテンツはJavaScriptを使用して300x300のキャンバスに描画されます。

なぜ表示に違いがあるのですか？

widthおよびheight属性は、キャンバスの座標系の幅または高さを決定するようですが、CSSプロパティは、それが表示されるボックスのサイズを決定するだけです。

これについては、http：//www.whatwg.org/html#attr-canvas-width（JSが必要）またはhttp://www.whatwg.org/c#attr-canvas-width（おそらくコンピューターを食べる）で説明されています。：

canvas要素は、要素のビットマップのサイズを制御するための2つの属性がありますwidthとheight。これらの属性を指定する場合は、有効な負でない整数の値を指定する必要があります。非負の整数を解析するためのルールを使用して、それらの数値を取得する必要があります。属性が欠落している場合、またはその値を解析してエラーが返された場合は、代わりにデフォルト値を使用する必要があります。width300への属性のデフォルト値、およびheight150への属性のデフォルト値。

を設定するにはwidth、height必要に応じて、

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

以下のため<canvas>の要素、CSSのためのルールwidthとは、heightページに描画されますcanvas要素の実際のサイズを設定します。一方、キャンバスAPIが使用する座標系または「グリッド」のHTML属性widthとheightサイズを設定します。

たとえば、これを考えてみます（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>

両方とも、キャンバス要素の内部座標を基準にして同じものが描画されています。ただし、2番目のキャンバスでは、CSSルールによってキャンバス全体がより広い領域に引き伸ばされているため、赤い長方形は2倍の幅になります。

注：widthまたはのCSSルールheightが指定されていない場合、ブラウザはHTML属性を使用して、これらの値の1ユニットがページ上の1pxと等しくなるように要素のサイズを設定します。これらの属性が指定されていない場合、それらがデフォルトになりますwidthの300とheightの150。

CSSで幅と高さを設定すると、キャンバスが引き伸ばされます。キャンバスの寸法を動的に操作する場合は、JavaScriptを次のように使用する必要があります。

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

ブラウザはCSSの幅と高さを使用しますが、キャンバス要素はキャンバスの幅と高さに基づいて拡大縮小します。JavaScriptで、CSSの幅と高さを読み取り、キャンバスの幅と高さをそれに設定します。

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

シャニマル矯正

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

CSSがキャンバス要素の幅と高さを設定するため、描画されたすべての要素が歪んだまま、座標空間に影響します

バニラJavaScriptで幅と高さを設定する方法についての私の方法は次のとおりです

canvas.width = numberForWidth

canvas.height = numberForHeight

CSSメディアクエリなどに基づく動的な動作が必要な場合は、キャンバスの幅と高さの属性を使用しないでください。CSSルールを使用してから、キャンバスレンダリングコンテキストを取得する前に、幅と高さの属性にCSSの幅と高さのスタイルを割り当てます。

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

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

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