find exact position of a drawn object on image by canvas

Question

i want to draw an object (like rectangle) on an image of size A4 paper. then i print this paper and then scan it back and save it to a jpeg file. now we have jpeg file containing original image along drawn object(s). finally i want to extract the exact positions of the objects on scaned image by canvas or any javascript based code. There are some notes also : for some reasons including better accuracy , its better to be 3 or 4 objects(rectangles) on four corners of the paper. The scan process may cause a bit rotation on final scanned image, but if we have 4 objects on 4 corner , we can calculate m and the final image could be obtained by rotate -m. so we have to be able to find those objects even the scanned image rotated a little.

my efforts: i printed qrcode as an object , its awesome, it gives the exact position of itself , but this is so big object that cant be used in my project , about 1/4 of qrcode size would be ok. i also add simple rectangle to image via canvas, and used getimagedata function to scan image pixels to find rectangle , but this method is so expensive (huge caculation to find needle on hystack) and also not accurate. So, We print 3 or 4 objects on 4 corners of a paper , after print and scan it back to a jpeg file, we want to find the exact positions of those objects. the qustion is : what should those 3 or 4 objects be ? and what method should use to retrive those positions? answer should be sth like 3 or 4 qrcodes on 4 corners , but those objects should be smaller about maximum 1/ 4 qrcode. any help would be apriciated. thanks in advance