JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" resize></canvas>
<script src="http://aa8f47fcc01b758779-b57f388ffba74a9d5600392ce75da4b1.r13.cf2.rackcdn.com/paperjs-v0.9.20/dist/paper-full.js"></script>
<!--<div id="slider">0
    <input id="slide" type="range" min="0" max="5" step="0.01" value="2" />5</div>
<br/>-->
<div id="sliderAmount"></div>
<script type="text/paperscript" canvas="myCanvas">
    var image;
    var arr = [];

    var values = {
        size: 10
    };

    var components = {
        size: {
            type: 'slider',
            label: 'Radius',
            min: 5,
            max: 100,
            onChange: function(value) {
                format(arr[0], value);
            }
        }
    };

    var palette = new Palette('Inkling', components, values);

    function format(url, value) {

        var dataURL;
        var img = new Image(),
            canvas = document.createElement("canvas"),
            ctx = canvas.getContext("2d"),
            src = url; // insert image url here

        img.crossOrigin = "Anonymous";

        img.onload = function() {
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img, 0, 0);
            var dataURL = canvas.toDataURL('image/png');
            canvas = null;
            project.clear();
            handleImages(dataURL);
        };
        img.src = url;

        function handleImages(img) {

            var raster = new Raster(img);

            raster.visible = false;

            var gridSize = 12;

            var spacing = 1.2;

            console.log(value);

            if (value === undefined) value = 2;

            raster.on('load', function() {
                raster = this;
                this.remove();

                raster.size = new Size(40, 30);

                for (var y = 0; y < raster.height; y++) {
                    for (var x = 0; x < raster.width; x++) {

                        var color = raster.getPixel(x, y);

                        var...

CSS

canvas {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    overflow: hidden;
    z-index:-1;
}