Filipe Moreira Filipe Moreira - 5 months ago 15
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

fillRect
or
rect
and then
fill
, 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):

outcome

Answer

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