JSFiddle - React, Tailwind, and code Playground

HTML

I'm trying to render some 2D shapes to a scaled up low resolution canvas. I'm using the canvas's 2d context functions "beginPath", "moveTo", "lineTo" and "fill" for this purpose. However I experienced that every shape I'm rendering will be rendered with antialiasing at the shape edges which I don't need and want in this case.

I tried to disable imagesmoothing by setting "context.imageSmoothingEnabled = false" and added "image-rendering: pixelated" to the style of the canvas but neither of these seem to help. Is there a way to render shapes without antialiasing or can't this feature be disabled. If not this would be pretty bad.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <canvas id="canvas" width="32" height="32" style="width:512px;height:512px;"></canvas>
        <script>
            function drawOne()
            {
                var canvas = document.getElementById("canvas");
                canvas.style.imageRendering = "pixelated";

                var ctx = canvas.getContext("2d");
                ctx.imageSmoothingEnabled = false;

                ctx.beginPath();
                ctx.moveTo(2, 2);
                ctx.lineTo(30, 10);
                ctx.lineTo(12, 30);
                ctx.closePath();
                ctx.fillStyle = "#FF0000";
                for (var y = 0; y < 32; y++) {
                	for (var x = 0; x < 32; x++) {
                  	if (ctx.isPointInPath(x + 0.5, y + 0.5)) {
                    	ctx.fillRect(x, y, 1, 1);
                    }
                  }
                }
                //ctx.fill();
            }

            drawOne();
        </script>
    </body>
</html>