2

I'm working on a webapp for face detection using the user's webcam or camera. The rectangle drawn around detected faces does not align correctly on mobile. I have applied scaling to the coordinates of the rectangle to handle varying window sizes. It works without any problems on the desktop browser.

// videoX is the number of pixels on the x-axis of the video stream
var scaleX = canvas.width/videoX;
var scaleY = canvas.height/videoY;
// predictions is an array containing the coordinates of the corners of the rectangles to be drawn around the detected faces
ctx.rect(
      scaleX*predictions.topLeft[0],
      scaleY*predictions.topLeft[1],
      scaleX*(predictions.bottomRight[0] - predictions.topLeft[0]),
      scaleY*(predictions.bottomRight[1] - predictions.topLeft[1])

In portrait mode the canvas' width is too large to fit on the screen entirely. In landscape mode it does fit and the problem ceases to exist. What can I do to resolve this issue? Thank you very much for your help.

program1232123
  • 87
  • 5

1 Answers1

2

You should set width and height of a canvas with JS, not with CSS. Initially and on the window's resize. Otherwise your canvas is scaled and drawings are scaled/misplaced too:

Html canvas behaves strangely

After the resizing the content of the canvas should be redrawn:

Add image as the background of an canvas

Alexander Nenashev
  • 8,775
  • 2
  • 6
  • 17
  • `const resize = () => { canvas.width = 0.6*window.innerWidth; canvas.height = 0.6*3*window.innerWidth/4; scaleX = canvas.width/videoX; scaleY = canvas.height/videoY; };` I have added this code along with an event listener. Now it works well on pc. However on mobile the rectangle is still not in the right place, even when I request the desktop version of the website. – program1232123 Jul 17 '23 at 12:56
  • @program1232123 what do you mean? – Alexander Nenashev Jul 17 '23 at 12:57
  • Also it works fine when rotate my phone to landscape mode. It does only not work in portrait mode – program1232123 Jul 17 '23 at 13:01