OpenCV JS - Rectangle and edges

Hi there!

I found an old question with no answer, so i would like to ask it again.
I have an image about an A4 paper sketched by the user, taken with mobile camera.

Old forum post:

Im using OpenCV JS in browser (web application) and below is my code.
I could generate the Canny edges from the picture, but i have no idea how how do i recognize a (not regular) rectangle on the output, and get theis coordinates.

My final output should be 4 X and 4 Y coords what i save for later, and do the cropping after reviewing.

var src = cv.imread(srcImgEl); // load the image from <img>
var dst = new cv.Mat();

cv.cvtColor(src, src, cv.COLOR_RGB2GRAY, 0);
cv.Canny(src, dst, 50, 100, 3, false);
cv.threshold(dst, dst, 80, 255, cv.THRESH_BINARY_INV);	

cv.imshow('the-canvas', dst); // display the output to canvas

src.delete(); // remember to free the memory