# How to draw on a video

**URL:** <https://discourse.processing.org/t/how-to-draw-on-a-video/27642>\
**Category:** Coding Questions\
**Created:** [February 7, 2021, 1:26am UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642 "2021-02-07T01:26:58Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![skypickle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/skypickle/32/11863_2.png) [@skypickle](https://discourse.processing.org/u/skypickle)\
**Post date:** [February 7, 2021, 1:26am UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/1 "2021-02-07T01:26:58Z")

</div>

This sketch below puts up a video on the upper part of a light blue canvas. When the mouse is pressed, I can draw a line on the canvas but wherevere there is video, the line is not persistent.

```auto
let capture;

function setup() {
  createCanvas(480, 480);
  background(102);
  capture = createCapture(VIDEO);
  capture.size(320,240);
  background(1,186,240,127);
 fill(237,340,93,127);
  capture.hide();

  rectMode(CENTER);
}

function draw() {
 image(capture, 0, 0, width, width * capture.height / capture.width);

stroke(255);
  if (mouseIsPressed === true) {
    line(mouseX, mouseY, pmouseX, pmouseY);
  }
}

```

Is it possible to draw on a video?

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 7, 2021, 1:41pm UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/2 "2021-02-07T13:41:19Z")

</div>

You can use a buffer and draw on it instead of drawing on the same layer than the video. This way it won’t be hidden by the next frame of your video :

```auto
let capture;
let graphics;

function setup() {
  createCanvas(480, 480);
  background(102);
  capture = createCapture(VIDEO);
  capture.size(320,240);
  background(1,186,240,127);
 fill(237,340,93,127);
  capture.hide();
  
  graphics = createGraphics(480, 480)

  rectMode(CENTER);
}

function draw() {
 image(capture, 0, 0, width, width * capture.height / capture.width);

graphics.stroke(255);
  if (mouseIsPressed === true) {
    graphics.line(mouseX, mouseY, pmouseX, pmouseY);
  }
  
  image(graphics,0,0, width, height)
}

```

---

<div class="post-metadata">

**Author:** ![skypickle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/skypickle/32/11863_2.png) [@skypickle](https://discourse.processing.org/u/skypickle)\
**Post date:** [February 7, 2021, 10:47pm UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/3 "2021-02-07T22:47:02Z")

</div>

Thank you. It works except for the fact that the cursor is diplaced from the line being drawn by approx -100,-100. In other words, the mouse does not show where the line is being drawn but displaced up and to the left.

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 9, 2021, 2:17pm UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/4 "2021-02-09T14:17:04Z")

</div>

Did you add something like a `transform` ? Or did you change the `width` or `height` of either the canvas either the buffer ?

---

<div class="post-metadata">

**Author:** ![skypickle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/skypickle/32/11863_2.png) [@skypickle](https://discourse.processing.org/u/skypickle)\
**Post date:** [February 10, 2021, 12:35am UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/5 "2021-02-10T00:35:45Z")

</div>

I tried it on a linux box and it works fine. interestingly, the mismatch of the pointer and the line happens only on a Mac. Must be the way the trackpad is mapped to the screen because the trackpad is smaller than the screen

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 10, 2021, 4:49pm UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/6 "2021-02-10T16:49:32Z")

</div>

Weird. Maybe it comes from the scaling factor (I think Mac are on 2k screens) ?

---

<div class="post-metadata">

**Author:** ![skypickle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/skypickle/32/11863_2.png) [@skypickle](https://discourse.processing.org/u/skypickle)\
**Post date:** [February 11, 2021, 2:25am UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/7 "2021-02-11T02:25:07Z")

</div>

I tried different scaling options and the displacement persists. At default scaling, it is 1440x900 even tho the screen has a lot more pixels. 2560 x 1600 **pixels** (16:10, 227 ppi)

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 12, 2021, 9:42am UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/8 "2021-02-12T09:42:58Z")

</div>

Well, on which browser did you tried it ? Both Mac and Linux  
Try on different browsers on mac ; because your actual browser might have special rules for canvas and causes troubles.

---

<div class="post-metadata">

**Author:** ![skypickle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/skypickle/32/11863_2.png) [@skypickle](https://discourse.processing.org/u/skypickle)\
**Post date:** [February 12, 2021, 1:02pm UTC](https://discourse.processing.org/t/how-to-draw-on-a-video/27642/9 "2021-02-12T13:02:46Z")

</div>

happens on safari, chrome  
happens using trackpad or mouse.  
Related to trackpad scaling.  
At top left of screen (0,0) pointer and line are coincident.  
As cursor is dragged to bottom right, line moves faster than cursor. The net result is that the leading point of the line being drawn is offscreen by the time the cursor is half across. I can upload a screen capture video if you tell me how.