CODEWITHSUNDEEP
javascripthtmlcanvassmoothingantialiasing
Michael Davison
Michael Davison

Reputation: 94

Remove smoothing / antialiasing from HTML Canvas text

I have a super simple canvas that I've created to display text onto a Matrix LED panel. But sending the canvas to the panel causes a huge outline on every character.

So the fix was to disable the outlines / anti-aliasing on the canvas, but i've tried every single method to remove it, none work..

<canvas id="canvas" width="32" height="64"></canvas>

// Round the text to the nearest integer
ctx.fillText("text", offsetX | 0, textY + offsetY | 0);
ctx.fillText(line, parseInt(offsetX), parseInt(textY + offsetY));

// Disable Smoothing
ctx.imageSmoothingQuality = "low";
ctx.imageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;

// Blocky Font
ctx.font = `14px Press Start 2P`;

//Scale the canvas
const dpi = window.devicePixelRatio;
const scale = 4; // Triple the size
// Scale the canvas element itself
canvas.style.width = canvas.width * scale + 'px';
canvas.style.height = canvas.height * scale + 'px';
ctx.scale(dpi, dpi);

// CSS (on the canvas)
image-rendering: pixelated;
image-rendering: crisp-edges;
font-smooth: never;
-webkit-font-smoothing : none;

// Change text rendering
ctx.globalCompositeOperation = "xor";
ctx.textRendering = "geometricPrecision";

Canvas output - As you cans see, the text is not blocky, and is smoothing is still active:

Canvas Output

Upvotes: 1

Views: 108

Answers (0)

Related Questions