noSmooth() involves recreating the canvas (see also these other problems: #6369 (comment))

A docs update sounds like the best option here for mentioning that the canvas will be recreated.

About positioning: I don't think we try to copy the style attribute from the last canvas when we recreate it, so that would probably be necessary to not lose the position if setAttributes or noSmooth is called after positioning. Since noSmooth calls setAttributes under the good, I think that would be the spot where we'd have to add a fix.

Yup, setAttributes has a property that recreates the canvas, so updating the documentation of noSmooth() is a good option.

Alternatively, we can update the codebase to prevent unnecessary canvas recreation by checking if antialias is already false before calling setAttributes(). This would improve performance, maintain canvas positioning, and ensure consistency between 2D and WebGL modes.

Would it be okay to proceed with a pull request for this fix?

I would like to work on this issue by modifying setAttributes() in p5.RendererGL.js to prevent unnecessary canvas recreation when noSmooth() is called in draw().

My Plan to Fix this issue:

1. Skip unnecessary recreation – Check if antialias is already false before calling _initContext(), avoiding redundant canvas resets.
2. Preserve positioning – Store position, top, and left before recreation and restore them after.
3. Update docs – Clarify that noSmooth() can cause canvas recreation if used in draw().

Let me know if any changes are needed and should I proceed with a PR!
Thank you :)

@ImRAJAS-SAMSE, I think the change might not have fully resolved the issue as expected. The canvas position still seems to be off after calling noSmooth(). Could you double-check whether the position is being correctly restored after the canvas is recreated?

Hi @HarshitaKatariya, thank you for reviewing the PR! 🙌

I double-checked the fix, and during testing, the canvas retained its position correctly after calling noSmooth().

What I Tested:

• Used createCanvas(300, 300, WEBGL); and positioned it at (150, 50).
• Called noSmooth() in draw().
• Verified that the canvas did not reset to (0, 0) after recreation.
• The sphere rendered properly with jagged edges, confirming that noSmooth() was applied.

Could you share a test case where the issue still occurs? I’d be happy to debug further if needed.

Hey, Bug Confirmed

I was able to reproduce the issue using a simple sketch with WEBGL mode and noSmooth(). When using:

let cnv;
function setup() {
  cnv = createCanvas(200, 200, WEBGL);
  noSmooth();
  cnv.position(100, 100);
}

The canvas does not appear at the expected (100, 100) location. It shifts slightly, a few pixels to the right and down, even though .position(100, 100) was set.

When I remove noSmooth(), the canvas positions correctly at (100, 100).

I'd love to help work on fixing this and would appreciate any guidance on where in the codebase to look!

Hi @commitverse looks like it actually was fixed #7557 but not yet merged! Sorry this slipped through. Will check and merge shortly. Thanks for looking into it.

The dev-2.0 fix has failing tests, though: #7574 so if you have any ideas for that, it would be helpful!