JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.23/paper-full.js"></script>
<p>
    <a id="resize-half" href="#">x0.5</a>
    <a id="resize-normal" href="#">x1</a>
    <a id="resize-twice" href="#">x2</a>
</p>
<canvas id="scene" width="100" height="100"></canvas>

JavaScript

var canvas = document.getElementById('scene');
var resizeHalf = document.getElementById('resize-half');
var resizeNormal = document.getElementById('resize-normal');
var resizeTwice = document.getElementById('resize-twice');

paper.setup(canvas);

var l = paper.project.activeLayer;

var dashAnimation = [
    [1, 7],
    [0, 1, 1, 6],
    [0, 2, 1, 5],
    [0, 3, 1, 4],
    [0, 4, 1, 3],
    [0, 5, 1, 2],
    [0, 6, 1, 1],
    [0, 7, 1, 0]
];

l.onFrame = function (event) {
    if (l.firstChild) {
        var step = Math.round(event.time * 30) % dashAnimation.length;
        l.firstChild.dashArray = dashAnimation[step];
    }
};

var p = new paper.Path({
    segments: [[5, 5], [30, 60], [60, 30], [95, 95]],
    strokeWidth: 3,
    strokeColor: 'red',
    strokeCap: 'round',
    strokeJoin: 'round'
});

paper.view.update();

var scale = 1;

function resize(canvas, w, h, s) {
    canvas.width = w;
    canvas.height = h;
    l.scale(s/scale, [0, 0]);
    scale = s;
}

resizeHalf.onclick = function () {
    resize(canvas, 50, 50, 0.5);
};

resizeNormal.onclick = function () {
    resize(canvas, 100, 100, 1);
};

resizeTwice.onclick = function () {
    resize(canvas, 200, 200, 2);
};