I want to draw flat shapes, like rectangles, on an HTML canvas but whenever I use the
var canvas = document.getElementById('map');
var ctx = canvas.getContext("2d");
ctx.fillStyle = c;
ctx.fillRect(x, y, w, h);
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