Support for multiple Painterro instances introduced in versions 1.2.29+.

First of all, let's create 2 div elements:

<div id="holder">
  <div id="p1" class="pa"></div>
  <div id="p2" class="pa"></div>
</div>

Now in JavaScript we will initialize Painterro instances and define IDs to put them in our divs:

Painterro({id: "p1"}).show();
Painterro({id: "p2"}).show();

Now we need to apply styles. An important rule to remember when you use Painterro's id option: Apply correct positioning for holding block. The thing is that internally Painterro uses absolute positioning, that why holding div should have position value, one from:

  • relative
  • absolute
  • fixed

If you will not define it, the div will receive a default value which is static and it might break Painterro look and functionality.

So we are going to add next styles:

#holder {
  display: flex;
}

.pa {
  position: relative;
  width: 300px;
  height: 200px;
}

#p1 {
  border: 2px solid red;
}

#p2 {
  border: 2px solid green;
}

Here is the result:

Multiple painterro instances

You can also touch it on jsfiddle

Don't hesitate to create issues on Painterro github page

#painterro