Ficou assim o código final de frações.

<meta charset="utf-8">
<canvas width="600" height="400"></canvas>

<script>

    function drawRect(x, y, size, color) {
        var canvas = document.querySelector("canvas");
        var brush = canvas.getContext("2d");

        brush.fillStyle = color;
        brush.fillRect(x, y, size, size);
        brush.strokeStyle = "black";
        brush.strokeRect(x, y, size, size);

    }

    function drawText(text, x, y) {
        var canvas = document.querySelector("canvas");
        var brush = canvas.getContext("2d");

        brush.font = "20px, Arial"; 
        brush.fillStyle = "black";
        brush.fillText(text, x, y); 
    }

    drawText("Qual é a fração?", 150, 30); 

        var y = 50;

         drawRect(0, y, 100, "red");
        drawRect(100, y, 100, "red");
        drawRect(200, y, 100, "red");
        drawRect(300, y, 100, "white");


</script>