Problem with windowResized and line drawing

gilFuser

Hi everybody.

I can't find where is the problem with my sketch. Every time I resize the browser's window, the drawing made with line(pmouseX, pmouseY, mouseX, mouseY) disappears. Is this normal? How could I avoid it?

Here is the Pen from it: https://codepen.io/skmecs/pen/LWapZJ

thank you all in advance

best regards, Gil

GoToLoop

As a workaround, you should consider createGraphics():
http://p5js.org/reference/#/p5/createGraphics

Don't forget to resize() it inside windowResized() as well:
http://p5js.org/reference/#/p5.Image/resize

gilFuser

Thanks GotoLoop

CreateGraphics worked to make the drawing not disappear, but I couldn't realize how to resize it. Resize works for image but not for createGraphics

GoToLoop

Just maybe method size() might work on it: http://p5js.org/reference/#/p5.Element/size

GoToLoop

Or try this 1 out: pg._renderer.resize(width, height);. ~:>

gilFuser

Unfortunately none of those options work. Both have made the drawing disappear when resizing the window.

Using size() while drawing in the pg, a copy of it is made in the canvas. Weird! pg._renderer.resize(width, height) just didn't do the trick.

thanks again

GoToLoop

https://GitHub.com/processing/p5.js/issues

gilFuser

Well, here is the issue in Github for future reference: https://github.com/processing/p5.js/issues/1876

kfrajer

@GoToLoop

Is it possible to capture the content of the canvas before it is resized with a PGraphics object and re-draw right after? Not much experience in p5.js....

Kf

GoToLoop

Yes, w/ method get(): http://p5js.org/reference/#/p5.Image/get
Extremely unoptimized but, here's some workaround I've just come up w/: ^#(^

let pg = createGraphics(width, height); // create p5.Graphics w/ same size as canvas

const img = pg.get(); // clone p5.Graphics as p5.Image
img.resize(pg.width>>1, pg.height>>1); // half new size

pg = createGraphics(img.width, img.height); // recreate p5.Graphics w/ new size
pg.background(img); // stamp p5.Image back onto new p5.Graphics