Skip to content

Fix set() to support p5.Graphics objects #8326

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
VANSH3104 wants to merge 3 commits into
base: dev-2.0
Choose a base branch
from
Open

Fix set() to support p5.Graphics objects #8326

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f26f436
Fix set() to support p5.Graphics objects
VANSH3104 Dec 10, 2025
5cba0fa
Add unit tests and improve set() handling for p5.Graphics
VANSH3104 Jan 7, 2026
0a44fbe
Add unit tests to suggested file and remove obsolete code
VANSH3104 Jan 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions src/core/p5.Renderer2D.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,16 +541,17 @@ class Renderer2D extends Renderer {
// round down to get integer numbers
x = Math.floor(x);
y = Math.floor(y);
if (imgOrCol instanceof Image) {
if (imgOrCol instanceof Graphics || imgOrCol instanceof Image) {
this.drawingContext.save();
Copy link
Contributor

@davepagurek davepagurek Jan 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This looks good, is the code in this branch the same as in the Image branch though? if so maybe we can simplify this by using an || condition and just having it be one branch?

Copy link
Contributor Author

@VANSH3104 VANSH3104 Jan 7, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, they are the same. I will update it.

this.drawingContext.setTransform(1, 0, 0, 1, 0, 0);
this.drawingContext.scale(
this._pixelDensity,
this._pixelDensity
);
this.drawingContext.clearRect(x, y, imgOrCol.width, imgOrCol.height);
this.drawingContext.drawImage(imgOrCol.canvas, x, y);
this.drawingContext.restore();
const width = imgOrCol.width;
const height = imgOrCol.height;
this.drawingContext.clearRect(x, y, width, height);
this.drawingContext.drawImage(imgOrCol.canvas, x, y, width, height);
} else {
let r = 0,
g = 0,
Expand Down
77 changes: 77 additions & 0 deletions test/unit/core/rendering.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -208,4 +208,81 @@ suite('Rendering', function() {
expect(myp5.splineProperties()).toMatchObject({ tightness: 2 });
});
});

suite('set() with p5.Graphics', function() {
let myp5;

beforeEach(function() {
myp5 = new p5(function(p) {
p.setup = function() {
p.createCanvas(100, 100);
p.pixelDensity(1);
};
});
});

afterEach(function() {
myp5.remove();
});

test('set() works with p5.Graphics on main canvas', function() {
myp5.background(0, 255, 0);
const gfx = myp5.createGraphics(20, 20);
gfx.background(255, 0, 0);
myp5.set(10, 10, gfx);
myp5.updatePixels();
assert.deepEqual(myp5.get(15, 15), [255, 0, 0, 255]);
assert.deepEqual(myp5.get(5, 5), [0, 255, 0, 255]);
});

test('set() works with p5.Graphics on p5.Graphics', function() {
const mainGfx = myp5.createGraphics(100, 100);
mainGfx.background(255);
const smallGfx = myp5.createGraphics(20, 20);
smallGfx.background(0, 0, 255);
mainGfx.set(10, 10, smallGfx);
mainGfx.updatePixels();
myp5.image(mainGfx, 0, 0);
assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]);
});

test('set() clears area under p5.Graphics', function() {
myp5.background(255);
myp5.stroke(255, 0, 0);
myp5.strokeWeight(2);
for (let i = 0; i < 100; i += 10) {
myp5.line(i, 0, i, 100);
}
const gfx = myp5.createGraphics(40, 40);
gfx.background(0, 255, 0);
myp5.set(30, 30, gfx);
myp5.updatePixels();
assert.deepEqual(myp5.get(35, 35), [0, 255, 0, 255]);
});

test('set() works at edge (0,0)', function() {
myp5.background(255);
const gfx = myp5.createGraphics(30, 30);
gfx.background(0, 0, 255);
myp5.set(0, 0, gfx);
myp5.updatePixels();
assert.deepEqual(myp5.get(15, 15), [0, 0, 255, 255]);
assert.deepEqual(myp5.get(35, 35), [255, 255, 255, 255]);
});

test('set() behaves same for p5.Graphics and p5.Image', function() {
const gfx = myp5.createGraphics(20, 20);
gfx.background(255, 0, 0);
const img = gfx.get();
myp5.background(255);
myp5.set(10, 10, gfx);
myp5.updatePixels();
const pixelFromGfx = myp5.get(15, 15);
myp5.background(255);
myp5.set(10, 10, img);
myp5.updatePixels();
const pixelFromImg = myp5.get(15, 15);
assert.deepEqual(pixelFromGfx, pixelFromImg);
});
});
});
Loading