diff --git a/src/core/p5.Renderer2D.js b/src/core/p5.Renderer2D.js index 26b8a25e2c..9390b867cf 100644 --- a/src/core/p5.Renderer2D.js +++ b/src/core/p5.Renderer2D.js @@ -551,16 +551,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(); 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, diff --git a/test/unit/core/rendering.js b/test/unit/core/rendering.js index 2e6e721f0a..c75039a990 100644 --- a/test/unit/core/rendering.js +++ b/test/unit/core/rendering.js @@ -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); + }); + }); });