0

I'm developing a very small image manipulation webapp and it currently is working well.

There is one issue where if the image loaded into the canvas is very large (larger than the desktop screen resolution), it is desired to zoom out of the page such that manipulating the image in the canvas is more tractable.

That works fine for the image, but the issue is that the rest of the application is zoomed as well (such as the palette, toolbar, etc.)

Is it possible to have page zoom only affect the canvas element and none of the other elements?

Otherwise, is it possible to modify built-in browser page zoom to accomplish this sort of functionality?

Ryan Peschel
  • 11,087
  • 19
  • 74
  • 136
  • https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform – Teemu Nov 27 '20 at 14:27
  • @Teemu I think this is the opposite of what is needed? The canvas is perfectly transformed with the page zoom and needs no modification. It's the rest of the elements that need to be transformed back to their original size. – Ryan Peschel Nov 27 '20 at 14:42
  • ?? With the matrix you can zoom only the canvas, other elements on the page are not touched at all. You can't pick some elements to zoom with page zoom, it's a browser level action, it's not done by CSS. – Teemu Nov 27 '20 at 14:44
  • SO you want something like Photoshop? Zoom-wheel, zoom, always at the mouse pointer etc? What have you researched? – Roko C. Buljan Nov 27 '20 at 14:58
  • My apologies if I wasn't clear. I want to still use browser zoom such that it works on all devices and is intuitive for the user to control, but to have that zoom effect only apply to the canvas and not affect the rest of the elements on the page. – Ryan Peschel Nov 27 '20 at 15:35
  • Like I said in my previous comment, browser zoom is a feature of the browser, you can't fork it. Canvas matrix is a part of the canvas, it works in any environment implementing canvas, there's no cross-browser issus with that. You can implement your own "native zoom" on the canvas only. – Teemu Nov 28 '20 at 11:29
  • @Teemu It's okay I found a solution here https://stackoverflow.com/a/65045306/962155 – Ryan Peschel Nov 28 '20 at 13:08
  • If the linked answer resolves your problem, I've might have misunderstood your question, despite of the given clarification in the comments and edits in the question itself. – Teemu Nov 28 '20 at 15:16

0 Answers0