Transformations on a p5.Renderer created by createGraphics are cumulative between draw()s

[KeyboardSounds]

Most appropriate sub-area of p5.js?

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

Details about the bug:

• p5.js version:
• Web browser and version:
  • Chrome: 91.0.4472.77
  • Firefox: 89.0
• Operating System: Windows 10
• Steps to reproduce this:

let pg;
function setup() {
  createCanvas(100, 100);
  pg = createGraphics(100, 100, WEBGL);
  pg.scale(0.5);
}

function draw() {
  pg.translate(-1, -1);
  background(200);
  pg.fill("blue");
  pg.background(100);
  pg.noStroke();
  pg.ellipse(pg.width / 50, pg.height / 50, 50, 50);
  image(pg, 50, 50);
  image(pg, 0, 0, 50, 50);
}

Expected behaviour:
From the docs

If scale() is called within draw(), the transformation is reset when the loop begins again.

Actual behavior:
The transformation is not reset when the loop begins again. Repeated transformations across multiple draw calls accumulate.

[welcome]

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.

[aferriss]

Hi @KeyboardSounds

I ran into this recently as well but I believe it is actually working as intended. Although I agree it is unexpected and confusing. We should definitely make this more clear in the documentation.

Essentially, you need to call pg.reset() at the end or beginning of your draw loop. Or you can wrap all you pg calls with pg.push() and pg.pop().

Take a look at the docs here. https://p5js.org/reference/#/p5.Graphics

As an aside, I'd definitely support changing this behavior. Maybe someone else can shed some light on why p5.Graphics was engineered this way.

[KeyboardSounds]

My bad! Thanks for the help, @aferriss.

Yeah, making this behaviour more explicit in the docs would be great. I am new to this project so I don't know what the stance is on breaking API changes, but for what it's worth, I think making a user created p5.Graphics behave similarly to a canvas is a good idea.

[limzykenneth]

It is less about why p5.Graphics works like this and more about the base canvas's behaviour. The base canvas has a bit of convenience that basically resets the transformation matrix automatically between every draw so push() pop() becomes a bit more optional when writing simple transformation. p5.Graphics doesn't have a draw loop of its own and so it doesn't have information about draw loop and for its common use case, doesn't need a draw loop, so the transformation matrix is handled more manually.

I don't see this behaviour changing as it is very important for p5.Graphics to not automatically reset transformation matrix in the draw loop, for example, it may not be drawn inside draw() but as a result of calling mouseClicked() amongst other reasons.

Adding a note about this difference in the docs is a good idea though.

[stalgiag]

This is noted in the docs in a way that is visible to the p5.Graphics next to the reset() link but perhaps it could be more prominent or direct.