JSFiddle - React, Tailwind, and code Playground

by dannygarcia

HTML

<script src="http://paperjs.org/static/js/paper.js"></script>
<canvas id="canvas" resize></canvas>

JavaScript

window.onload = function() {
    
// Sets up the canvas.
var canvas = document.getElementById('canvas');
paper.install(window);
paper.setup(canvas);

// Defines tools.
var tool = new Tool();

// Global Variables
var layer = project.activeLayer,
    norm = {x:0,y:0},
    perspective = 0.02,
    width, height, center,
    image1,image2,raster,
    imagesObj = {}, images = {};


/*    Photo Constructor
*    @param id / element id
*    @param position / [x,y] position array
*/
var Photo = Base.extend({

    // Init
    initialize: function(id, position) {

        // Image element ID.
        this.id = id;

        // Image position.
        this.position = position;

        this.orig = {};

        // Crop setting for the mask.
        this.crop = 1.1;

        // Main Rectangle Builder
        this.rectangle = new Rectangle( new Point(0, 0), new Point(300, 200) );
        
        this.raster = new Path.Rectangle(this.rectangle);
        this.raster.fillColor = "#ff0000";
        
        // Builds the mask.
        this.mask = new Path.Rectangle(this.rectangle);
        // this.mask.clipMask = true;

        // Bulds the border.
        this.border = new Path.Rectangle(this.rectangle);
        this.border.fillColor = "#ffffff";

        // Builds the shadow.
        this.shadow = new Path.Rectangle(this.rectangle);
        this.shadow.fillColor = new paper.RGBColor(0, 0, 0, 0.3);

        // Sets positions for the mask and image.
        this.mask.position = this.position;
        this.raster.position = this.position;

        // Saves the original positions from the mask.
        for (var i=0,sl=this.mask.segments.length;i<sl;i++) {
            var ps = this.mask.segments[i];
            this.orig[i] = {
                x: ps.point.x,
                y: ps.point.y
            };
        }

        // Groups the mask and the raster to
        // separate them from the border and shadow.
        this.photoGroup = new Group(this.mask,this.raster);
        //...