Jump to content


Html5 Canvas: Resize For Viewport But Maintain Quality?

  • Please log in to reply
No replies to this topic

#1 Daniel Joshua James

Daniel Joshua James

    New Member

  • Members
  • Pip
  • 1 posts

Posted 28 December 2014 - 03:47 PM

I am new to using the HTML5 canvas and I am using EaselJS to draw lines, circles and display images on the canvas. I want the canvas to maintain it's ratio in terms of height and width (A4 page ratio), but to be able to resize whilst maintaing a good quality.

At the moment, on changing the canvas size, say to make it larger, the lines and circles become blurred as it increases and sometimes disappear all together as the size is decreased. I think that this is because the pixels set for the canvas aren't being changed as the size changes and so I am simply stretching whatever is drawn on the canvas. I want the lines to look crisp whatever it's size.

How has everyone overcome this problem? Do you redraw the canvas/change its pixel settings as it's size is changed or is there an easier solution?

You can see what I'm working with here: http://stave.byethost33.com/zoom.html

Thank you for reading.


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users