CODEWITHSUNDEEP
htmlcsshtml5-canvashtml5-video
kadina
kadina

Reputation: 5382

How to make sure canvas is of same size of video in html?

I am displaying one local video and one remote video on the page. I am using this html page on the mobile. It is working fine. Now I have to draw on the local video using mouse (and using canvas). But we didn't specify the exact location of video elements. So unable to think how to render the canvas exactly over local video. Below are the files.

HTML:

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="/css/main.css" />
</head>

<body>
  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

</body>
</html>

CSS:

body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}

Can any one please let me know how to overlay canvas exactly over localVideo. Canvas should be at the same position of localVideo and should be same size of localVideo.

Upvotes: 4

Views: 2891

Answers (2)

MARSHMALLOW
MARSHMALLOW

Reputation: 1395

You can calculate the X and Y position of the <video> element by using the getBoundingClientRect() method, also you can use both of the offsetWidth and offsetHeight properties to get its width and height.

Then you should add position: absolute; to the <canvas> element so you can set the values of the top and left properties.

Here is your code (inspect the code snippet it to see the difference!):

let xPos = window.scrollX + document.querySelector('#localVideo').getBoundingClientRect().left;
let yPos = window.scrollY + document.querySelector('#localVideo').getBoundingClientRect().top;

document.getElementById('_canvas').style.left = xPos + "px";
document.getElementById('_canvas').style.top = yPos + "px";

document.getElementById('_canvas').style.width = document.querySelector('#localVideo').offsetWidth + "px";
document.getElementById('_canvas').style.height = document.querySelector('#localVideo').offsetHeight + "px";
body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}

canvas {
  position: absolute;
}
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

<canvas id="_canvas"></canvas>
</body>
</html>

Upvotes: 1

Dekel
Dekel

Reputation: 62566

You can use the getBoundingClientRect() method to get the information about the position of the current element, and then use this information in order to position the canvas element.

Check the following example:

document.addEventListener("DOMContentLoaded", function(){
  const canvas = document.getElementById("canvasEl")
  const vid = document.getElementById("localVideo");
  const vidStyleData = vid.getBoundingClientRect();
  canvas.style.width = vidStyleData.width + "px";
  canvas.style.height = vidStyleData.height + "px";
  canvas.style.left = vidStyleData.left + "px";
  canvas.style.top = vidStyleData.top + "px";
});
body {
  font-family: sans-serif;
}

video {
  max-width: 100%;
  width: 320px;
}
canvas {
  position: absolute;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="/css/main.css" />
</head>

<body>
  <h1>Realtime communication with WebRTC</h1>

  <div id="videos">
    <video id="localVideo" autoplay muted></video>
    <video id="remoteVideo" autoplay></video>
  </div>

<canvas id="canvasEl"></canvas>
</body>
</html>

Note that I set the position of the canvas to absolute using the css. If you want you can do this with javascript as well.

Upvotes: 3

Related Questions