mouseOver created object does not trigger function in p5

Hi. I would be grateful for your thoughts as to why my code fails to print “mouse is over graphic” when I move the mouse over the image “pg.” (However, if I set it up as createCanvas rather than createGraphics, it works.) Thanks in advance!

let pg;
function setup() {
  createCanvas(400, 400);
  pg = createGraphics(200, 200);

function draw() {
  //bottom layer;
  //top layer
  image(pg, 0, 0);

function over(){
  print("mouse is over graphic");
1 Like

-a- please format your code using the </> code button from forum editor menu

-b- start p5.js from
and examples like

-c- where you got that


from , looks like jquery?

1 Like

Thanks for your reply. I’ll format the code appropriately in the future.

Re: the use of mouseOver, I’ve drawn from two p5-using examples:

one which uses the canvas as the element

another which uses text as the element

Both of these respond to the mouseOver function. But when I try something similar using a graphic as an element, the mouseOver does not function.

1 Like

does say
is a DOM element

well inside the canvas usually make our own OVER function as
not have that.
using the pix position of rects…
so i was thinking you want that, sorry

These 3 p5 methods below:

  1. loadImage() ->
  2. createImage() ->
  3. createGraphics() ->

They all create a <canvas> element:

However, they’re mainly meant to be rendered to the sketch’s main
p5.Renderer <canvas>:

Via these 3 p5 methods below:

  1. image() ->
  2. set() ->
  3. background() ->

B/c of that, they are created INVISIBLE!

Either b/c they’re not appended to the browser’s DOM at all; such is the case of the p5.Image instance created by createImage() & loadImage():

Or in the case of the p5.Graphics instance created by createGraphics():

They’re indeed appended:

However, they’re explicitly made invisible:

As long as an element is invisible, it’s gonna ignore all user interaction events over it.

If you really wanna make your p5.Graphics instances created by p5::createGraphics() respond to user interaction events, you’re gonna have to make them visible 1st by invoking their method p5.Element::show():


We can edit our own posts. So you can format your post here in the present. :wink:

1 Like

My thanks to both kil and GoToLooP for your replies. GoToLoop’s advice to insert the show() function did the trick. :+1: