[2.0] image() mislogs error when using canvas as first parameter

[juaogeneroso]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

p5.js v2.0.0-beta.2 February 3, 2025

Web browser and version

Chrome 133.0.6943.141 (Official Build) (64-bit) (cohort: M133 Rollout), Firefox 135.0.1 20250216192613

Operating system

Windows 10

Steps to reproduce this

Steps:

1. Create a canvas with createCanvas() and, optionally, an offscreen canvas with createGraphics().
2. Call image() with a canvas as the main parameter.
3. The canvas is drawn correctly as an image, but it still logs a friendly error: "p5.js says: Expected Image or Element or Texture or Framebuffer or FramebufferTexture at the first parameter in image()."

Doing the above with image() attached to an offscreen canvas doesn't log errors.

Snippet:

let defaultCanvas, graphicsCanvas;

async function setup() {
  defaultCanvas = createCanvas(400, 400);
  graphicsCanvas = createGraphics(400, 400);
  
  graphicsCanvas.background(0); // doesn't affect results, but shows that the image() function still works
  
  image(defaultCanvas, 0, 0); // consoles error
  image(graphicsCanvas, 0, 0); // consoles error
  graphicsCanvas.image(defaultCanvas, 0, 0); // doesn't console error
  graphicsCanvas.image(graphicsCanvas, 0, 0); // doesn't console error
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[swastikCommits]

Can I work on this?

[swastikCommits]

const testParamType = (param, type) => {
..... rest of the code ...

if (!matches && type.name === 'Image' && 
    param && (param.canvas || (param.elt && param.elt.tagName === 'CANVAS'))) {
  matches = true;
}

return matches ? 0 : 1;

};

This might fix the issue because of the friendly error in src/core/friendly_errors/validate_params.js

[limzykenneth]

I think this is more likely requiring a fix in the inline reference parameter type for image() as it may not have accounted for the canvas type being passed in. I have yet to check it in detail though.

[ksen0]

Hi @limzykenneth, whenever you have the chance to check it, if it's a docs update please add the Documentation / Help Wanted label? Thank you!

[ksen0]

Closing as there is a resolving PR