JSFiddle - React, Tailwind, and code Playground

by Shishir Raven

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.0/paper-full.min.js"></script>
<canvas id="canvas_1"></canvas>
<canvas id="canvas_2"></canvas>

CSS

#canvas_1 {
  width: 200px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
}

#canvas_2 {
  width: 200px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
}

JavaScript

var scope = new paper.PaperScope();
var scope2 = new paper.PaperScope();

var canvas_1 = document.getElementById('canvas_1');
scope.setup(canvas_1)
var canvas_2 = document.getElementById('canvas_2');
scope2.setup(canvas_2)


scope.activate();
var myCircle = new scope.Path.Circle(new scope.Point(100, 70), 50);
myCircle.fillColor = 'black';

scope2.activate();
var myCircle = new scope2.Path.Circle(new scope2.Point(100, 70), 50);
myCircle.fillColor = 'green';