How to draw on a video

p5.js Coding Questions
1

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.

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?

2

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 :

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)
}
1 Like
3

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.

4

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

5

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

6

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

7

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)

8

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.

9

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.