How to fix the canvas blurry on CSS2 transform: scale(2)?

user_16222958 0
Viewed 99

I tried pretty much everything I could find on the google and still can't get the solution in canvas.

Because the zoom affects positioning differently in different browsers, I want to use CSS 2d translate() will typically provide better FPS than position: absolute top & left.

https://jsfiddle.net/p0L9ztw8/

const dpr = window.devicePixelRatio || window.webkitDevicePixelRatio || window.mozDevicePixelRatio || 1;
const chineseSize = 60
const scale = 2

HanziWriter.create($('#test1')[0], '龍', {
  renderer: 'canvas',
  width: chineseSize * dpr * scale,
  height: chineseSize * dpr * scale,
  padding: 2
});


HanziWriter.create($('#test2')[0], '龍', {
  renderer: 'canvas',
  width: chineseSize * dpr * scale,
  height: chineseSize * dpr * scale,
  padding: 2
});
html, body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  transform-origin: left top;
}

canvas {
  width: 60px;
  height: 60px;
}

#test1 {
  left: 0;
  transform: scale(2);
}

#test2 {
  left: 50%;
  zoom: 200%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hanzi-writer@3.2.0/dist/index.cjs.min.js"></script>
<div id="test1"></div>
<div id="test2"></div>

blurry canvas css javascript
1 Answers

Have you tried pixelated image rendering in css? It may be what is needed on the canvas and each div to be scaled.

 canvas {
    image-rendering: -moz-crisp-edges;image-rendering: -webkit-crisp-edges;image-rendering: pixelated;image-rendering: crisp-edges;
    width: 60px;
    height: 60px;
  }
user_174328410
Related