Daniel Joshua James

Member Since 28 Dec 2014
Offline Last Active Dec 29 2014 10:17 AM

Topics I've Started

Html5 Canvas: Resize For Viewport But Maintain Quality?

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.