问题
I'm working on a project in which i need to draw an image on a canvas and rectangles also to mention the objects present on that image. Rectangles are drawing correct positions if the image is not scaling to fit to the canvas. But if i scaled the image, Rectangles are not getting scaled to meet the correct positions. I have already gone through similar questions/answers present on stackoverflow, but none of them are working in my case or may be i'm not much educated to understand and implement them in a proper way.
Following are the 2 different snippets: Without Image Scale (Drawing Rectangles in correct positions) and With Image Scale(Drawing rectangles on incorrect position)
Difference is just with the commented lines.
ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
//ctx.drawImage(img, 0, 0); // not fitting image to canvas fill
and
ctx.strokeRect(c[0]* scale, c[1]* scale, c[2] * scale , c[3] * scale);
//ctx.strokeRect(c[0], c[1], c[2] , c[3]); //drawing rects on correct position
来源：https://stackoverflow.com/questions/59245964/draw-scaled-rectangles-on-scaled-image-canvas