Why can't we set width and height for canvas using css

Question

Why does the canvas appear scaled when height and width are specified in css instead of DOM?

Html:

 <canvas></canvas>

Css:

 canvas{
       width:100px;
       height:100px;
    }

Answer 1

You can set the width and height on the canvas using CSS - but

canvas width, the height attribute defines the actual pixel that will be used to draw on the canvas. It is used for the canvas coordinate system.

CSS width / height, on the other hand, is related to the window model.

300px 150px. / CSS canvas, 300px/150px. 300px/150px, / CSS 100px/100px. ? ? .

HTML - https://html.spec.whatwg.org/multipage/scripting.html#attr-canvas-width

, .

Answer 2

, .

• html ().
• .

:

css html, ( , ).

, , , , , . , , .

:

, , . ,

<canvas width="300" height="300"></canvas>

Answer 3

canvas height width. javascript-:

var canvas = document.getElementsByTagName('canvas')[0];
canvas.width  = 100;
canvas.height = 100;

, , , css, "" , . "", , .

Answer 4

, , . , CSS?

-

border: 1px solid;

css . fiddle