CODEWITHSUNDEEP
javagwtcanvas
membersound
membersound

Reputation: 86747

How to zoom properly into a canvas?

When I apply canvas.getContext2d().scale(1.5, 1.5), then my objects in the canvas gets bigger as expected, but are somehow blurred.

What do I have to do to make the canvas draw my objects as sharp as it is when not scaled?

Upvotes: 1

Views: 153

Answers (2)

membersound
membersound

Reputation: 86747

I discovered that there are ctx.transform() and ctx.scale()methods for a Canvas. Which work fine, but as they behave like just scaling an image up, the result is not sharp. Guess due to (anti)alasing and stuff like that.

So I decided to rewrite all my ctx.draw() methods to respect a GLOBAL_OFFSET, which changes value when user zooms in and out. This way, the canvas objects can keep their original coordiante point values, but respecting the zoom level and offset it is possible to draw them bigger or thinner, which kind of "simmulates" the zooming and panning.

Upvotes: 0

Daniel De León
Daniel De León

Reputation: 13649

Use the antialiasing rendering hint:

   Graphics2D g2 = (Graphics2D) g;
   g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);

So when you scale, it will look really better.

The images of the right use the RenderingHints.VALUE_ANTIALIAS_ON enter image description here

Upvotes: 1

Related Questions