Using layers ??

jbeausej

Hello !

I am using p5.js 0.4.2 and making a small webapp that uses a lot of text boxes that the user can manipulate. I want to create a drawing layer on to of the text boxes. So the user can draw over the text boxes and still move the boxes without erasing the drawing he made.

Using background(255); on a single layer would be nice and simple but I doubt it is possible in p5js. I have seen many layer projects for processing tought...

blindfish

Assuming the text boxes are DOM elements then these can be positioned above the drawing layer (AKA canvas) using CSS - e.g.:

.box {
  z-index: 999;
  position: absolute;
  left: 100px;
  top: 100px;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.25); /* unnecessary flourish */
}

jbeausej

@blindfish No the text boxes are not DOM elements. Sorry, I should have been more specific... I am positionning the boxes and drawing lines between them so it would not be a good idea to set them as dom elements...

blindfish

In principle the same approach to that used in Processing should be possible with p5js: draw to a separate 'graphics' object and place this as an image on the canvas. If I get the chance I'll throw together a proof of concept...

jbeausej

Thank you for indicating the path I should follow, if you know any reference or tutorial about that separate graphics object.

Ater

In reference: http://p5js.org/reference/#/p5/createGraphics