Destination rectangle incorrect on image() with dx,dy, dWidth, dHeight

[lisajamhoury]

Most appropriate sub-area of p5.js?

• [ ] Accessibility (Web Accessibility)
• [ ] Build tools and processes
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Friendly error system
• [x ] Image
• [ ] IO (Input/Output)
• [ ] Localization
• [ ] Math
• [ ] Unit Testing
• [ ] Typography
• [ ] Utilities
• [ ] WebGL
• [ ] Other (specify if possible)

Details about the bug:

• p5.js version: 1.2.0
• Web browser and version:
• Chrome 89.0.4389.128 (Official Build) (64-bit) (cohort: Stable)
• Operating System:
• Windows Version 10.0.19042 Build 19042
• Steps to reproduce this:

I am using the dx,dy,dWidth,dHeight options in image() to copy a part of the webcam and place it on the canvas. The image appears too large. Interestingly if I add tint(255) ahead of the image it displays properly.

See this sketch for a reproduction of the issue: https://editor.p5js.org/lisajamhoury/sketches/fz9-4pWCJ

The sketch should show the webcam mirrored, but the image on the left is not correct.

If you comment in line 27 to add the tint, the error is fixed.

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[micuat]

I haven't looked into it thoroughly but I'm guessing it's related to this issue https://github.com/processing/p5.js/issues/4535#issuecomment-640072884

(also given that tint / get / loadPixels correct the issue)

[davepagurek]

I'm going to close this issue now that https://github.com/processing/p5.js/pull/5159/ is merged in! Feel free to continue the discussion in case there are other cases that PR didn't handle.

[Qianqianye]

Thanks @davepagurek!