Why is there no rectangle in HTML 5 canvas?

Below is a simple HTML 5 page with a canvas tag. On the canvas, the rectangle is drawn in black, and black text is shown. But for some reason, the rectangle is actually gray. To make it black, I have to draw it 2 or 3 times on top of me. It looks like there is some kind of alpha problem, but I don't know why it would be.

ALSO, the line width looks a bit larger than the width of 1px ....?

Can someone show me what I'm doing wrong?

function draw()
{
    var canvas = document.getElementById('tutorial');
    if (canvas.getContext)
    {
        var ctx = canvas.getContext('2d');
        //ctx.globalAlpha = 1;
        //ctx.globalCompositeOperation = "source-over";

        ctx.lineWidth = "1";
        ctx.strokeStyle = "#000000";
        ctx.strokeRect(100, 100, 50, 50); //appears grey

        ctx.font = "22px Arial";
        ctx.fillStyle = "#000000";
        ctx.fillText("test", 120, 120); //appears black as expected
    }
}