JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://paperjs.org/assets/js/paper.js"></script>
<canvas id="board" class="board"></canvas>
<a href="#" id="startbtn" onclick="addElements()">Start adding elements</a>
<div>
    <span id="msg"></span>
</div>

CSS

.board {
  background-color: #FFF;
  width: 100%;
  border: 1px solid #000;
}

JavaScript

paper.install(window);

paper.setup(document.getElementById('board'));

document.getElementById('startbtn').onclick = function () {
    var times = 0;
    var interval = window.setInterval(function () {
        var path = new Path({
          segments: [
            new Point(Math.floor(Math.random() * 500) + 0, Math.floor(Math.random() * 200) + 0), 
            new Point(Math.floor(Math.random() * 500) + 0, Math.floor(Math.random() * 200) + 0),
            new Point(Math.floor(Math.random() * 500) + 0, Math.floor(Math.random() * 200) + 0),
            new Point(Math.floor(Math.random() * 500) + 0, Math.floor(Math.random() * 200) + 0),
            new Point(Math.floor(Math.random() * 500) + 0, Math.floor(Math.random() * 200) + 0)],
          strokeColor: '#000',
          strokeWidth: 2
        });
        times++;
        if (times == 200) {
          window.clearInterval(interval);
        }
        project.view.update();
        document.getElementById('msg').innerHTML = project.activeLayer.children.length + ' elements';
    }, 10);    
}