Drawing on top of a video in p5.js


I made a button with enables you to draw dots. However, I want to draw these dots on top of a video. So I think I need to place a canvas on top a video.

However, I didn’t succeed yet. Does somebody maybe have any advice?

(This is the p5: p5.js Web Editor

don’t focus on the bad quality video, that is just to try it out :wink: )

Thanks in advance!!

Hello there,

Some things to get you going more:

  • There are errors in the console. If you do not understand them, then feel free to ask here, but they should be addressed first
  • Just some simpler ways of writing the same code:
let someVar = true;

// This...
if (someVar === true) {
 // Do this...
// Can be written as:
if (someVar) {
 // Do this...
// To change a boolean:
let myBoolean = true;
function invertBoolean() {
  myBoolean = !myBoolean;
// It is nicer to read and type

Hints to do what you originally asked:

  • Think about when you want the background to refresh
    • If it refreshes on every frame, you cannot draw on it
  • Think about what should be on top of what
    • Should the video be on top of the background?
    • Should the background be on top of the video?
  • Consider what colour to make the background:
    • Look at the API for the background: reference | p5.js
    • Pay particular attention to the alpha property

If you get stuck, be sure to ask specific questions about:

  • What you want.
  • What is happening
  • What is confusing you

Hope this helps

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.