Mapping an image to a quadrilateral in p5.js without using WEBGL - image

Question

I'm trying to map a custom image to a 4-sided quad with a non-rectangular shape in p5.js. I know this is possible(and quite easy) using a WEBGL canvas and the texture() command, but I'm trying not to use WEBGL in my code simply because I don't like the WEBGL coding environment; and it seems kind of overkill to swap to a 3D canvas just for this(I don't need any other 3D objects in my program).
I'm looking for an in-built solution, or a custom library with something of this matter in it. I've tried both to some degree and have turned up empty-handed; which is odd because this seems like a relatively simple thing to ask for.
I'm also kind of stupid and I don't understand HTML in general. I use p5.js because of this, but I'm not against any kind of help: all is appreciated.
I've tried using a mixture of shearX() and shearY() but those would only work for an orthographic view; I'm going for perspective.
I have looked into brute-forcing it by literally going through each pixel in the quad and calculating the pixel color it should have based on the image, but haven't had this work yet. It also seems hecka laggy; and I'm looking for this quad to render in real-time.

Answer 1

If you don't want to use WebGL (or p5.js) there are other js libraries that can apply perspective warp via canvas, such as perspective.js.
Here's their example:
// ctx (CanvasRenderingContext2D): The 2D context of a HTML5 canvas element.
// image (Image): The image to transform.
var p = new Perspective(ctx, image);
p.draw([
[30, 30], // Top-left [x, y]
[image.width - 50, 50], // Top-right [x, y]
[image.width - 70, image.height - 30], // bottom-right [x, y]
[10, image.height] // bottom-left [x, y]
]);
This may be bit overkill, but warpPerspective() in opencv.js also support a similar transform.
Here's their example:
let src = cv.imread('canvasInput');
let dst = new cv.Mat();
let dsize = new cv.Size(src.rows, src.cols);
// (data32F[0], data32F[1]) is the first point
// (data32F[2], data32F[3]) is the sescond point
// (data32F[4], data32F[5]) is the third point
// (data32F[6], data32F[7]) is the fourth point
let srcTri = cv.matFromArray(4, 1, cv.CV_32FC2, [56, 65, 368, 52, 28, 387, 389, 390]);
let dstTri = cv.matFromArray(4, 1, cv.CV_32FC2, [0, 0, 300, 0, 0, 300, 300, 300]);
let M = cv.getPerspectiveTransform(srcTri, dstTri);
// You can try more different parameters
cv.warpPerspective(src, dst, M, dsize, cv.INTER_LINEAR, cv.BORDER_CONSTANT, new cv.Scalar());
cv.imshow('canvasOutput', dst);
src.delete(); dst.delete(); M.delete(); srcTri.delete(); dstTri.delete();