HTML5 Canvas pixellation issue on Safari (blurry)

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

• https://codepen.io/celebisait/pen/gOzWgbM

<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:

Safari:

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

• HTML Canvas blurry in Safari but not Chrome after translate3d
• WebGL mixes colors on pixel level
• image-rendering "crisp-edges" vs. "pixelated"
• https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html