JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height=500 width=500>
 </canvas>

JavaScript

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var dotPositions = [];

drawXAxis = function(width, height) {
    ctx.moveTo(width / 2, 0);
    ctx.lineTo(width / 2, height);
    ctx.stroke();
}

drawYAxis = function(width, height) {
    ctx.moveTo(0, height / 2);
    ctx.lineTo(width, height / 2);
    ctx.stroke();
}

getDots = function(width, height, dots, radius) {
    var spacingX = width / (dots + 1);
    var spacingY = height / (dots + 1);

    for (var x = spacingX; x < width; x += spacingX) {
        for (var y = spacingY; y < height; y += spacingY) {
            dotPositions.push([x, y]);
        }
    }
}

calcSlope = function() {
    return 0.5;
}

drawSlopes = function(slope) {
    for (var i = 0; i < dotPositions.length; i++) {
        var coords = dotPositions[i];
        
        ctx.rect(coords[0], coords[1], 10, 0);
        ctx.fill();

        //ctx.translate(coords[0], coords[1]);
        //ctx.rotate(Math.PI / 4);

        ctx.stroke();
        ctx.restore();
    }
}

drawXAxis(c.width, c.height);
drawYAxis(c.width, c.height);
getDots(c.width, c.height, 11, 1);
drawSlopes(calcSlope());