Рисование текста поверх прямоугольника

Я ' м пытаюсь нарисовать текст в углу прямоугольника, но я только начал рисовать текст на прямоугольнике, прежде чем заняться позиционированием. Кажется, я не могу нарисовать прямоугольник, залить его цветом, а затем нарисовать текст поверх него. Даже если я сначала нарисую текст, затем прямоугольник, а затем заполню эти порядки, кажется, что прямоугольник просто перекрывает текст.

Этот код покажет текст и прямоугольники без заливки.

context.beginPath();

for (var i = 0; i < 8; i++) {
    context.font = "18pt Arial";
    context.fillText("blah", 0, 0 + (i * 50));
    context.rect(30, 0 + (i * 50), 50, 50);
}

context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

Этот код покажет мне текст и заполнены прямоугольниками, но текст, кажется, появляется под прямоугольниками.

context.beginPath();

for (var i = 0; i < 8; i++) {
   context.font = "18pt Arial";
   context.fillText("blah", 0, 0 + (i * 50));
   context.rect(30, 0 + (i * 50), 50, 50);
}

context.fillStyle = "#33cc00";
context.fill();
context.lineWidth = 0.1;
context.strokeStyle = "black";
context.stroke();

Есть идеи, что я делаю не так?