Hello! I’ve recently started a drawing app I’m calling “Imager” using HTML5. Drawing I don’t have an issue with. It’s preserving the current image on the canvas when I “zoom” in and out. I tried manipulating a the CSS ‘zoom’ property, but this messes up the drawing. (The line isn’t painting where the cursor is)
The current method I’m trying is storing the data URL to a variable, resizing the canvas, and drawing the image again. This works when I zoom out, but zooming in I get a grainy result.
My last effort would be to use the canvas context scale() method, but I don’t know how I would go about doing this. I know how scale() works, just not for this particular case. Could someone show me how to use the scale() method in this context?
How could I zoom out (make it smaller), and zoom back in and retain the original quality of the image on the canvas? How could scale() do this?
Below is the link to the web page.
I decided not to make a reduced test case because, well, there isn’t much that I have so far.
Functions are zoomIn() and zoomOut(). I am grateful for any help that you all may have to offer.
Here is the link.
The colorpicker does nothing right now, however, you can draw a black line by clicking and dragging the mouse over the canvas.
Keep in mind that I want to retain the quality of the image in it’s entirety (the lines you draw AND the Google logo).
Thank you for your help!
