1

Here is the demonstration of the issue on a minimal example:

<div id="main-container">
   <div id="canvas-scale-div" class="canvas-container2">
       <canvas id="myCanvas" class="place-canvas"></canvas>    
   </div>
</div>

I am basically drawing a set of pixels, and it shows great on Chrome. However, the same page shows up blurry on Safari. (Or on iphone)

I am trying to draw set of pixels in the canvas and be able to zoom.

Chrome:

enter image description here

Safari:

enter image description here

I found these other similar questions, but really can't find a good solution that works on my minimal example.

Sait
  • 19,045
  • 18
  • 72
  • 99
  • 1
    Looks like they apply the `image-rendering` before the `transform`. That's certainly a bug, feel free to [open an issue](https://bugs.webkit.org/). And for a workaround, directly set the CSS `width` and `height` to the scaled value. – Kaiido Sep 19 '22 at 02:21
  • Do you mean I should set `canvas.style.width` and `canvas.style.height` at each wheel action? i.e., in the `updateScale()` function in the above example? Do I get rid of the `canvas.style.transform` altogether? – Sait Sep 20 '22 at 01:15
  • As far as I understand in the other example, there is a `redraw()` happening very frequently: `c.clearRect()` and `c.drawImage()` in the animate function. I was hoping to avoid that if possible because that would make my application so laggy. Is there a way to solve the pixellation issue without redrawing so frequently? – Sait Sep 20 '22 at 02:09
  • Also, what do you mean by "do everything on the canvas directly". Can you please elaborate a bit on that? – Sait Sep 20 '22 at 02:10
  • 1
    Even with CSS the browser has to perform the same "redraw". In the example there we don't do more work than what the CSS engine would have done. It's even also GPU accelerated. Basically, the CSS engine also uses objects to do the rendering. So instead of letting the CSS engine doing the work, we can perform the same work manually on the element directly. So in your case that would mean preparing the image at scale(1) first, generate an ImageBitmap from it, and then `drawImage()` with the correct scale. Basically just like the other question, but with scale. – Kaiido Sep 20 '22 at 02:30
  • 1
    Here you get it: https://codepen.io/_-0-_/pen/Rwygaem – Kaiido Sep 20 '22 at 02:53

0 Answers0