0

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">
Deepika Rao
  • 145
  • 1
  • 3
  • 11
  • Possible duplicate of [style width vs width attribute in HTML](https://stackoverflow.com/questions/26373726/style-width-vs-width-attribute-in-html) – ɢʀᴜɴᴛ Jun 07 '17 at 09:52
  • 1
    `canvas.width` & `canvas.height` set resolution and is always in pixels and should not be post fixed with a CSS unit type eg good `width="300"`. bad `width="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. – Blindman67 Jun 07 '17 at 19:30

1 Answers1

0

height="" and width="" are HTML and do not use "view height" or "view width", only fixed sizes.

vh and vw are used in CSS only.

dennispreston
  • 596
  • 4
  • 14