What is the difference between render size (width and height) and display size (style.width and style.height)
Even when I change it to px it is still not same.
These are the examples https://codepen.io/chartjs/pen/oWLZaR
<canvas id="chart_0" height="40vw" width="80vw"></canvas>
https://codepen.io/chartjs/pen/WjxpmO
<canvas id="chart_0" style="height:40vh; width:80vw">
canvas.width
&canvas.height
set resolution and is always in pixels and should not be post fixed with a CSS unit type eg goodwidth="300"
. badwidth="300vw"
Resolution is the number of pixels that an image contains.canvas.style.width
&canvas.style.height
sets the display size (amount of space the canvas occupies on the page) and is independent of canvas resolution. Display size must be in any of the valid CSS units.