How can I create an array of X,Y coordinates in a square shape given three inputs?

Question

I am trying to create a grid of x/y coordinates in a square pattern, given three points on an x/y plane. A grid like this

This is to be used to drive a gcode generator for moving a tool-head to desired x,y positions on a 3d printer. I need to account for skew and off-alignment of the square, so the grid of x / y points inside the square needs to account for the alignment.

function genGrid (topLeft, btmRight, btmLeft, rows, cols) {
    // Generate Grid
    // Return array of coordinates like the red dots in the picture I made.
} 

[This picture helps explain it better!]

Answer 1

This code did the trick!

<script>
function grid(p1, p2, count) {
    pointPerRow = Math.sqrt(count);
    p3 = {
        x: (p1.x + p2.x + p2.y - p1.y) / 2,
        y: (p1.y + p2.y + p1.x - p2.x) / 2
    };
    p4 = {
        x: (p1.x + p2.x + p1.y - p2.y) / 2,
        y: (p1.y + p2.y + p2.x - p1.x) / 2
    };
    edgeLenght = Math.sqrt( (p3.x - p1.x)**2 + (p3.y - p1.y)**2);

    vectorH = {
        x: (p3.x - p1.x) / edgeLenght,
        y: (p3.y - p1.y) / edgeLenght
    };
    vectorV = {
        x: (p4.x - p1.x) / edgeLenght,
        y: (p4.y - p1.y) / edgeLenght
    };

    movingStep = edgeLenght / (pointPerRow -1);

    result = {};
    for (var i = 0; i < pointPerRow; i++) {
        row = {};
        point = {
            x: p1.x + vectorH.x * movingStep * (i),
            y: p1.y + vectorH.y * movingStep * (i),
        }

        for (var j = 0; j < pointPerRow; j++) {
            row[j] = {
                x: point.x + vectorV.x * movingStep * (j),
                y: point.y + vectorV.y * movingStep * (j),
            };
        }

        result[i] = row;

    }
    // Debugging

    for (var x=0;x < pointPerRow; x++) {
        for (var y=0; y < pointPerRow;  y++) {
            ctx.fillStyle="#000000";
            ctx.fillRect(result[x][y].x,result[x][y].y,10,10);
        }
    }
    ctx.fillStyle="#FF0000";
    ctx.fillRect(p1.x,p1.y,5,5);
    ctx.fillRect(p2.x,p2.y,5,5);
    ctx.fillRect(p3.x,p3.y,5,5);
    ctx.fillRect(p4.x,p4.y,5,5);
    return result;
}



// Create a canvas that extends the entire screen
// and it will draw right over the other html elements, like buttons, etc
var canvas = document.createElement("canvas");
canvas.setAttribute("width", window.innerWidth);
canvas.setAttribute("height", window.innerHeight);
canvas.setAttribute("style", "position: absolute; x:0; y:0;");
document.body.appendChild(canvas);

//Then you can draw a point at (10,10) like this:

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

var grid = grid({x:100, y:50}, {x:200, y:350}, 16);


</script>