Filipe Moreira Filipe Moreira - 3 months ago 11x
HTML Question

Drawing flat shapes on HTML canvas creates blurry borders

I want to draw flat shapes, like rectangles, on an HTML canvas but whenever I use the

and then
, the outcome is a shape with some kind of blurry inner glow and shadow. Is there any way to get rid of these “light effects”?

As an example, here’s a piece of code I used:

var canvas = document.getElementById('map');
var ctx = canvas.getContext("2d");

ctx.fillStyle = c;
ctx.fillRect(x, y, w, h);

and the produced outcome (with the glow and shadow):



probably just set the canvas.width and canvas.height to the same values you got the css style. when some elements get scaled by css they normally get antialias (canvas and images).

image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;

some browsers also comply with these styles that remove the antialias more about the css here