Setting "imageSmoothingEnabled" To "false" Is Not Working On HTML5 Canvas [duplicate]

I set imageSmoothingEnabled to false on my drawing context to get sharp pixel rendering when I draw to the canvas, but for some reason the image comes out blurry. The example below sets up a 20x20 canvas filled with black and draws a red diagonal line of pixels with imageSmoothingEnabled set to false across it. It still comes out blurry in Chrome, FF, and Edge.

Can anyone tell me why this isn't working and how to fix it?

HTML:

<canvas></canvas>

JS:

var context = document.querySelector('canvas').getContext('2d');

context.canvas.height = context.canvas.width = 20;

context.fillStyle = "#000000";
context.fillRect(0, 0, 20, 20);

context.imageSmoothingEnabled = false;
context.fillStyle = "#ff0000";

for (var i = 0; i < 20; i ++) {

  context.fillRect(i, i, 1, 1);

}

I have set up the following fiddle to showcase my problem:

https://jsfiddle.net/ct39rqpf/7/

Note: In the fiddle, you can set the CSS to have image-rendering:pixelated for the canvas and it will show what I'm trying to get with imageSmoothingEnabled set to false.

EDIT: I found that imageSmoothingEnabled only applies when scaling an image, which I am not doing. What I don't understand is that when I apply image-rendering:pixelated in the CSS, I get a much crisper image than I do simply by drawing pixels to the unscaled canvas. Why is there a blur by default?