JSFiddle - React, Tailwind, and code Playground

by Bart Kalisz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.2/paper-full.min.js"></script>
	<canvas id="myCanvas" resize></canvas>

CSS

html,
body {
    height: 100%;
}

/* Scale canvas with resize attribute to full size */
canvas[resize] {
    width: 100%;
    height: 100%;
}

JavaScript

var canvas = document.getElementById("myCanvas");

paper.install(window);
paper.setup(canvas);

var rectangle = new Rectangle(new Point(20, 20), new Size(60, 60));
var path = new Path.Rectangle(rectangle);
path.strokeColor = 'black';