0

When I'm rendering text onto the canvas, it seems like it's being stretched out and squished together. How can I fix this? (Images are zoomed in to show the differences in font. Both are at 900% zoom)

What I want:

What I'm getting:

My code:

            this.ctx.textAlign = "left";
            this.ctx.textBaseline = "middle";
            this.ctx.font = "10px Verdana";
            this.ctx.strokeStyle = 'black';
            this.ctx.lineWidth = 1;
            this.ctx.fillStyle = "rgba(204, 204, 204, 1)";
            this.ctx.fillText(text, startX, startY);
Sh0T
  • 72
  • 1
  • 6
  • Is your canvas affected by transforms? Maybe [antialiasing](https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-imagesmoothingenabled)? – DDomen Jan 31 '21 at 04:30
  • There are no transformations other than clip. Changing imageSmoothing didn't do anything. – Sh0T Jan 31 '21 at 04:36
  • 1
    Have you setted width/height of the canvas in percentage, with CSS/style attribute? – DDomen Jan 31 '21 at 04:40
  • I'm setting the width/height to innerWidth and innerHeight (pixels) via javascript ```this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; window.addEventListener("resize", () => { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight; }); ``` – Sh0T Jan 31 '21 at 04:45
  • Try to fix width and height (like 600x400) and see if it is an aspect ratio problem. Take also a look at this [blurry html text on canvas](https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas) or either this [canvas text rendering](https://stackoverflow.com/questions/40066166/canvas-text-rendering-blurry) – DDomen Jan 31 '21 at 05:01

0 Answers0