CODEWITHSUNDEEP
htmlgoogle-chromesvgcanvastext-rendering
Otaka
Otaka

Reputation: 1

Why is Canvas text thicker than SVG text with the same font size and font family?

I noticed that if I draw the text with the same font size and font family, the text on canvas is thicker than the text on SVG. Does anyone know what causes this and if it can be fixed? Is it possible to make text on Canvas the same as SVG or vice versa? image

<!DOCTYPE html>
<html>
  <head>
    <style>
      canvas,
      svg,
      text,
      tspan {
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
      }
      canvas,
      svg {
        border: 1px solid gainsboro;
      }
    </style>
  </head>
  <body>
    <h2 style="color: #000">SVG</h2>
    <h2 id="devicePixelRatio"></h2>
    <svg height="200" width="200">
      <text id="text" x="5" y="30" font-size="25px" fill="#c7862c">
        I love SVG!
      </text>
    </svg>
    <canvas id="canvas" height="200" width="200"> </canvas>
  </body>

  <script>
    const size = 200;
    const scale = window.devicePixelRatio;
    const canvas = document.querySelector('canvas');
    const scaleEl = document.querySelector('#devicePixelRatio');
    const ctx = canvas.getContext('2d');
    const textEl = document.querySelector('#text');
    const styles = getComputedStyle(textEl);
    canvas.style.width = `${size}px`;
    canvas.style.height = `${size}px`;
    canvas.width = Math.floor(size * scale);
    canvas.height = Math.floor(size * scale);

    ctx.save();
    ctx.scale(scale, scale);
    ctx.fillStyle = '#c7862c';
    ctx.font = `${styles.fontWeight} ${styles.fontSize} ${styles.fontFamily}`;
    ctx.textRendering = 'geometricPrecision';
    ctx.fillText('I love SVG!', 5, 30);
    ctx.restore();
    scaleEl.innerHTML += 'devicePixelRatio: ' + scale;
  </script>
</html>

Expected behavior: Text on Canvas the same as SVG or vice versa

Upvotes: 0

Views: 43

Answers (0)

Related Questions