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.