0

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)?

Abdelouahab
  • 7,331
  • 11
  • 52
  • 82

1 Answers1

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.

  • oh thank you! so the CSS is scaled only for Retina display for example? so no more memory is used? – Abdelouahab Mar 07 '14 at 22:20
  • 1
    @Abdelouahab it's typically used for retina display but also in print scenarios. Yes, more memory will be used (but the screen resolution is also higher). –  Mar 07 '14 at 22:41
  • so the advice is ALWAYS use CSS instead of doubling the real canvas? – Abdelouahab Mar 07 '14 at 22:48
  • 1
    @Abdelouahab you would need to double (width and height, but not style.width/height) the canvas if the ratio was for example 2:1 and then force down the element size with CSS. But only in those cases. If you know your page will be viewed on a retina displays you will probably want to use the `window.devicePixelRatio` property to find out or at least to set the canvas width/height based on the ratio and CSS based on on-screen size. Here is one way: http://stackoverflow.com/questions/17359915/get-screen-resolution-on-a-mobile-website/17359959#comment25192546_17359959 –  Mar 07 '14 at 23:13