scaling canvas directly VS scaling the CSS in HiDPI

Question

Sorry, I am a beginner, sometimes i find people saying that I have to scale only the CSS, and the other examples i find that they multiply the size directly with the new scale, in other words canvas.width VS canvas.style.width

What is the difference?

Does latest Chrome behave like Safari (now in March 2014)?

Answer 1

Canvas consists of two parts: the element canvas which is what you see on screen. Then sort of "behind" the scenes there is the image bitmap which you draw onto.

Setting element.style will only affect the element itself, but not the behind the scene (internal) bitmap. This bitmap is simply stretched to fit the element size (like an image). If the size isn't specified it will default to 300 x 150 pixels.

The width and height properties (or attributes for the tag) are the ones setting the size of the internal bitmap.

An element without CSS will typically adopt to the size of the internal bitmap (there is pixel aspect ratio involved here as wel but normally the relationship is 1:1).

You can however override this by setting the element's CSS size. Again, it doesn't affect the internal bitmap but simply stretches it to fit the element.

All browsers should behave the same.