I'm following a JS canvas tutorial and tried to play with the canvas properties and found this scenario, if the canvas width and height are styled in-line, the objects look fine, but when removing the in-line properties, and use CSS to set the same width and height, the object drawn in the canvas are resized/scaled, any idea why? Links to documentation are appreciated
For example:
<canvas id="myCanvas" width="480" height="320">
The browser does not support Canvas
</canvas>
changes when used as:
<canvas id="myCanvas">
The browser does not support Canvas
</canvas>
#myCanvas {
width: 480px;
height: 320px;
}
The object drawn is stretched as: https://ibb.co/TmKhbgb
Looks like the canvas should keep a proportion ratio 2:1 (rectangular) when CSS is used to set up its dimensions
