Skip to content

fix(image): fix pixelDensity idempotence and high-DPI canvas resize - #9167

Open
Pcmhacker-piro wants to merge 2 commits into
processing:mainfrom
Pcmhacker-piro:fix/image-pixel-density-resize
Open

fix(image): fix pixelDensity idempotence and high-DPI canvas resize#9167
Pcmhacker-piro wants to merge 2 commits into
processing:mainfrom
Pcmhacker-piro:fix/image-pixel-density-resize

Conversation

@Pcmhacker-piro

Copy link
Copy Markdown

Resolves #9152

Changes:

  • In src/image/p5.Image.js, fixed pixelDensity(density) to derive logical dimensions from physical canvas dimensions (this.width = this.canvas.width / density, this.height = this.canvas.height / density). This makes repeated calls idempotent (no compounding dimension shrinkage) and allows resetting pixelDensity(1) to accurately restore original dimensions.
  • In src/image/p5.Image.js, fixed resize(width, height) to scale the backing canvas and temporary canvas by this._pixelDensity (width * pd, height * pd). This prevents high-DPI images from having their canvas backing store downscaled to logical size, which caused subsequent get() calls to return [0, 0, 0, 0] as out-of-bounds and set() to fail writes.
  • Fixed Color reference in Image.prototype.set().
  • Added unit tests in test/unit/image/p5.Image.js covering:
    • pixelDensity() getter and setter behavior
    • Repeated pixelDensity() idempotence and restoring dimensions
    • Non-positive density fallback to 1
    • Backing canvas scaling with pixelDensity > 1 in resize()
    • Full coordinate access with get() and set() after resizing a high-DPI image

PR Checklist

  • npm run lint passes
  • [Inline reference] is included / updated
  • [Unit tests] are included / updated

AI Usage Disclosure

AI tools were used assistively to help write unit test cases and verify edge cases. The changes have been tested and reviewed locally.

…rocessing#9152)

- Derive logical dimensions from physical canvas dimensions and pixel density in pixelDensity() so repeated calls are idempotent and resetting to 1 restores original size
- Scale backing canvas by pixel density in resize() to preserve high-DPI resolution
- Fix Color reference in Image.prototype.set()
- Add unit tests for pixelDensity and high-DPI resize
@welcome

welcome Bot commented Sep 11, 2026

Copy link
Copy Markdown

🎉 Thanks for opening this pull request! For guidance on contributing, check out our contributor guidelines and other resources for contributors!
🤔 Please ensure that your PR links to an issue, which has been approved for work by a maintainer; otherwise, there might already be someone working on it, or still ongoing discussion about implementation. You are welcome to join the discussion in an Issue if you're not sure!
🌸 Once your PR is merged, be sure to add yourself to the list of contributors on the readme page !

Thank You!

@Pcmhacker-piro

Copy link
Copy Markdown
Author

Hi @ksen0, could you please take a look at this PR when you have a moment? It resolves #9152 by ensuring p5.Image.prototype.pixelDensity idempotence and properly scaling the backing canvas during resize(). Comprehensive unit tests have been added, and both tests and linter are passing. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[p5.js 2.0+ Bug Report]: p5.Image pixelDensity() compounds division on repeated calls and resize() desynchronizes canvas backing store

2 participants