Draw 3D canvas in p5.js using only coordinates

Question

Drawn the canvas using just four coordinates that should perfectly overlap the image's grid lines.

12 tiles on X-axis & 14 tiles on Y-axis

.js

/* eslint-disable */
// @ts-nocheck
import React from 'react';
import Sketch from 'react-p5';
import p5Types from 'p5';

type ComponentProps = {
  //Your component props
};

window.p5.prototype.smoothQuad = function (x1, y1, x2, y2, x3, y3, x4, y4, detailX, detailY) {
  if (typeof detailX === 'undefined') {
    detailX = 13;
  }
  if (typeof detailY === 'undefined') {
    detailY = 15;
  }

  const gId = `smoothQuad|${x1}|${y1}|${x2}|${y2}|${x3}|${y3}|${x4}|${y4}|${detailX}|${detailY}`;

  if (!this._renderer.geometryInHash(gId)) {
    const smoothQuadGeom = new window.p5.Geometry(detailX, detailY, function () {
      //algorithm adapted from c++ to js
      //https://stackoverflow.com/questions/16989181/whats-the-correct-way-to-draw-a-distorted-plane-in-opengl/16993202#16993202

      let xRes = 1.0 / (this.detailX - 1);
      let yRes = 1.0 / (this.detailY - 1);

      for (let y = 0; y < this.detailY; y++) {
        for (let x = 0; x < this.detailX; x++) {
          let pctx = x * xRes;
          let pcty = y * yRes;

          let linePt0x = (1 - pcty) * x1 + pcty * x4;
          let linePt0y = (1 - pcty) * y1 + pcty * y4;
          let linePt1x = (1 - pcty) * x2 + pcty * x3;
          let linePt1y = (1 - pcty) * y2 + pcty * y3;

          let ptx = (1 - pctx) * linePt0x + pctx * linePt1x;
          let pty = (1 - pctx) * linePt0y + pctx * linePt1y;
          console.log('p', linePt0y, pty);

          this.vertices.push(new p5.Vector(ptx, pty));
          this.uvs.push([pctx, pcty]);
        }
      }
    });

    //compute faces
    smoothQuadGeom.faces = [];

    for (let y = 0; y < detailY - 1; y++) {
      for (let x = 0; x < detailX - 1; x++) {
        let pt0 = x + y * detailX;
        let pt1 = x + 1 + y * detailX;
        let pt2 = x + 1 + (y + 1) * detailX;
        let pt3 = x + (y + 1) * detailX;
        smoothQuadGeom.faces.push([pt0, pt1, pt2]);
        smoothQuadGeom.faces.push([pt0, pt2, pt3]);
      }
    }
    smoothQuadGeom.computeNormals()._makeTriangleEdges()._edgesToVertices();
    this._renderer.createBuffers(gId, smoothQuadGeom);
  }
  this._renderer.drawBuffersScaled(gId, 1, 1, 1);

  return this;
};

let vecTL, vecTR, vecBL, vecBR;
const Quad = (props: ComponentProps) => {

  const setup = (p5: p5Types, canvasParentRef: Element) => {
    p5.createCanvas(6485, 2047, p5.WEBGL).parent(canvasParentRef);   
    const x1 = 6485 / 2 - 2403;
    const y1 = 2047 / 2 - 1148;

    const x2 = 6485 / 2 - 4013;
    const y2 = 2047 / 2 - 1155;

    const x3 = 6485 / 2 - 6373;
    const y3 = 2047 / 2 - 1839;

    const x4 = 6485 / 2 - 124;
    const y4 = 2047 / 2 - 1845;

    // 1,2,3,4
    const coordinatesArr1 = [
      { x: -x1, y: -y1 },
      { x: -x2, y: -y2 },
      { x: -x3, y: -y3 },
      { x: -x4, y: -y4 },
    ];

    vecTL = coordinatesArr1[0];
    vecTR = coordinatesArr1[1];
    vecBR = coordinatesArr1[2];
    vecBL = coordinatesArr1[3];
  };

  const draw = (p5: p5Types) => {
    p5.stroke('red');
    p5.smoothQuad(vecTL.x, vecTL.y, vecTR.x, vecTR.y, vecBR.x, vecBR.y, vecBL.x, vecBL.y, 13, 15);
  };

  const mp = (e: MouseEvent) => {
    console.log(e, e.mouseX, e.mouseY);
  };

  return <Sketch preload={preload} setup={setup} draw={draw} mousePressed={mp} />;
};

export default Quad;

.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}

canvas {
  display: block;
  background-image: url('../src/assets/lobby-area.jpg');
  background-size: contain;
  background-repeat: no-repeat;
}

As you see the vertical lines are perfectly aligned with the images grid but the horizontal lines are not.

Rendered image

The reason is height has been divided and shared equally with each tiles. It should gradually increase from far away tiles to near.

Expecting quad grid should be perfectly align with the image grid.

Expected image

(Bonus) Also, is it possible to add 2d image in each of the grid boxes?

Thank you!