JSFiddle - React, Tailwind, and code Playground

HTML

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

<img width="512" height="512" id="image" style="display: none;" src="http://cache.gawkerassets.com/assets/images/4/2011/11/2b012384e8ac0c2549d0f303037541be.jpg" />
<img width="512" height="512" id="image2" style="display: none;" src="https://encrypted-tbn1.google.com/images?q=tbn:ANd9GcQK-XptdLlrJthzM5j_KJXcAQSRF0ALw6fH61QrxG9xtkgLLsx06w" />

JavaScript

// setting up...
var canvas = document.getElementById('canvas');
paper.install(window);
paper.setup(canvas);

// Global Variables
var layer = project.activeLayer,
    width, height, center;


var Photo = Base.extend({

    initialize: function(position, image) {
        
        // Add a new layer for this shape and make
        // it active so any new paths get built here.
        this.layer = new Layer();
        this.layer.activate();
        
        // save position
        this.position = position;
        
        // Main rectangle builder.
        this.rectangle = new Rectangle( new Point(0, 0), new Point(300, 200) );
        
        // the mask for this shape.
        this.mask = new Path.Rectangle(this.rectangle);
        this.mask.selected = true;
        
        // the image to be cropped.
        this.raster = new Raster(image);
        
        // positioning
        this.mask.position = this.position;
        this.raster.position = this.position;
        
        // HERE!
        // creates a clip group and clips the first child???
        this.clipGroup = new Group(this.mask, this.raster);
        this.clipGroup.clipped = true;
        
    }
    
});


// Let's create two example images...
new Rectangle( [150,250], [150,250]+[50, 50]);
new Rectangle( [100,200], [100,200] +[50, 50]);

view.onFrame = function(event) {
    //
};