JSFiddle - React, Tailwind, and code Playground

by xidi2xidi

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Debug Paper.js</title>
    <script src="https://unpkg.com/acorn"></script>
    <script src="https://unpkg.com/paper"></script>
    <style>
        html,
        body {
            margin   : 0;
            overflow : hidden;
            height   : 100%;
        }

        canvas {
            position : absolute;
            top      : 10px;
            left     : 10px;
            border   : 1px solid;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/paperscript" canvas="canvas">

    // Wrap the code in an async function so that we can use await keyword.
    (async() => {
        // Load image and wait that it is fully loaded.
        const image = await loadImage('http://assets.paperjs.org/images/marilyn.jpg');

        // Set canvas size to fit the image.
        view.viewSize = [image.width, image.height];

        // Draw the image as canvas background.
        const raster = new Raster(image);
        raster.opacity = 0.4;
        raster.fitBounds(view.bounds);

        // Draw a circle on top of the image.
        const circle = new Path.Circle({
            center: view.center,
            radius: 50,
            fillColor: 'orange',
            // On circle drag...
            onMouseDrag: event => {
                // ...move it.
                circle.position += event.delta;
            }
        });

        // Draw intsructions.
        new PointText({
            content: 'Drag and drop the circle over the image',
            point: view.center + [0, -80],
            justification: 'center',
            fontSize: 24
        });
    })();

    // Wraps image loading into a Promise to have a cleaner code.
    function loadImage(src) {
        return new Promise((resolve, reject) => {
            let img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = src;
        });
   ...