JSFiddle - React, Tailwind, and code Playground

by ecneto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.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]);

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

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