0

I'm using PanZoom on a canvas element. when i'm doing zoom in - the text on the canvas becomes blurry.. is there any way to avoid it? this is also the case with adding images to the canvas..

please see the below example:

http://jsfiddle.net/tomermiz/ba4vghnb!

ba4vghnb Thanks!!

TomerMiz
  • 377
  • 1
  • 3
  • 13
  • The plugin will not work for the canvas. You need to zoom what is drawn not the pixels as panzoom does. – Blindman67 Jan 12 '17 at 13:45
  • you can see it works for the cnavas in the jsfiddle i sent, the question is why its blurry. – TomerMiz Jan 18 '17 at 13:04
  • It is blurry because you are making the pixels bigger, you are not making the text bigger, it remains the same number of pixel high and wide. If you turn off bilinear filtering by adding `image-rendering: pixelated;` to the canvas style you will more clearly see the pixels get bigger. The plugin you are using is not suited for zooming on the canvas, you need to find another plugin or use that canvas 2D API to set the zoom. EG var ctx = canvas.getContext("2d"); ctx.scale(2,2); will double the text size and not make it blurry. – Blindman67 Jan 18 '17 at 13:36
  • Thanks! Do you recommend working with SVG instead? – TomerMiz Jan 19 '17 at 09:46
  • I do not normally recommend SVG for anything but in this case SVG will work with the panzoom plugin you are using. – Blindman67 Jan 19 '17 at 09:54

0 Answers0