JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://paperjs.org/static/js/paper.js"></script>
<p>The light red circle should be in the red square, and the light blue circle should be in the blue square.</p>
<canvas id="canvas1"></canvas>
<canvas id="canvas2"></canvas>

CSS

canvas {
    width: 100px;
    height: 100px;
}

#canvas1 {
    background-color: red;
}

#canvas2 {
    background-color: blue;
}

JavaScript

var mypapers = [];
mypapers[0] = new paper.PaperScope();
mypapers[1] = new paper.PaperScope();

mypapers[0].setup($("#canvas1")[0]);
mypapers[1].setup($("#canvas2")[0]);

var circle1 = new mypapers[0].Path.Circle(30, 30, 20);
circle1.style = {
    fillColor: new paper.Color(1, .5, .5),
    strokeColor: "black"
};

var circle2 = new mypapers[1].Path.Circle(60, 60, 20);
circle2.style = {
    fillColor: new paper.Color(.5, .5, 1),
    strokeColor: "black"
};

mypapers[0].view.draw()
mypapers[1].view.draw()