Disabling Image Smoothing is not working even with CSS and JavaScript

user_15651026 0
Viewed 111

I have a canvas that only draws big pixels, as the game is completely based on boxes. The problem is that on every single image and canvas there is image smoothing. And it's quite ugly. I've looked through the internet for quite some time now, and so far none of the solutions have worked.

enter image description here

The canvas always ends up blurring names, text, and everything else. The images also blur.

I've tried what I think is every solution that isn't super complicated that involves a bunch of stuff I don't understand. I've used CSS and JavaScript to try and disable image smoothing.

Here's what I've tried so far:

CSS

#gameCanvas {
    image-rendering: optimizeSpeed;
    image-rendering: optimizeContrast;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    /* image-rendering: pixelated; */
    -ms-interpolation-mode: nearest-neighbor;
}

JavaScript

game.imageSmoothingEnabled = false;
game.webkitImageSmoothingEnabled = false;
game.mozImageSmoothingEnabled = false;
game.filter = 'url(#remove-alpha)';

(where game is the 2d context of the canvas) Edit: I'm not sure if the filter URL does anything.

enter image description here

Is there a combination of CSS, JavaScript, and HTML that can disable the blurring?

game = document.getElementById('gameCanvas').getContext('2d');
document.getElementById('gameCanvas').width = window.innerWidth;
document.getElementById('gameCanvas').height = window.innerHeight;
document.getElementById('gameCanvas').addEventListener('contextmenu', e => e.preventDefault());
game.imageSmoothingEnabled = false;
game.webkitImageSmoothingEnabled = false;
game.mozImageSmoothingEnabled = false;
game.filter = 'url(#remove-alpha)';

function drawThings() {
game.font = '11px Arial';
game.fillStyle = '#000000';
game.fillText('HERES SOME TEXT', Math.random()*500, Math.random()*500);
game.fillRect(Math.random()*500, Math.random()*500, 40, 40);
}
window.onresize = function() {
game.imageSmoothingEnabled = false;
game.webkitImageSmoothingEnabled = false;
game.mozImageSmoothingEnabled = false;
game.filter = 'url(#remove-alpha)';
}
#gameCanvas {
    position: absolute;
    top: 80px;
    left: 0px;
    margin: 0px;
    -webkit-user-drag: none;
    user-select: none;
    image-rendering: optimizeSpeed;
    image-rendering: optimizeContrast;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-crisp-edges;
    /* image-rendering: pixelated; */
    -ms-interpolation-mode: nearest-neighbor;
}
<button onclick="drawThings();">click for things</button>
<p>If you zoom in you can see that the text is blurry</p>
<canvas id="gameCanvas"></canvas>

html5-canvas css javascript
1 Answers

I've found a solution, and it's the DPR (Device Pixel Ratio) It's the result of scaling the screen to non-native resolutions, so interpolation will make the image appear blurry. It can be fixed by scaling the canvas (and changing the width and height) to negate the effects of DPR. It can be accessed with the window.devicePixelRatio property:

DPR = window.devicePixelRatio ?? 1;
canvas.width = window.innerWidth*DPR;
canvas.height = window.innerHeight*DPR;
canvas.scale(DPR, DPR);

This will scale the canvas so the resolution of the canvas matches the actual resolution of the screen, and not the "supposed" resolution of the window. It works really well when combined with the CSS property image-rendering: pixelated;

Note that it removes anti-aliasing so diagonal lines will appear more jagged.

user_156510260
Related