I See Cards Game Part 1 - Image Cropping

HTML

<script src="codeproject.com"></script>
<script src="jquery-ui.js"></script>
<canvas id="mtn" class="canvas"></canvas>
<img id="portrait" src="http://lackeyinnovations.azurewebsites.net/images/mountain.jpg" alt="Mountain"></img>
<button onclick="getRandomShapes()">Click to Begin Puzzle</button>

CSS

body {
    background-color: #808080;
    font-family: Arial, Helvetica, sans-serif
}
.drop {
    float: inherit;
    width: 600px;
    height: 200px;
    background-color: #494775;
    image-orientation: initial;
}
img {
    width: 600px;
    height: 400px;
}
p {
    text-indent: 0.0em
}
#imgcntr {
    text-align: center;
    padding: 16px;
    border-image-source: url(./Cards);
}
body {
    background-color:#ededed;
    font:normal 12px/18px Arial, Helvetica, sans-serif;
}
h1 {
    display:block;
    width:600px;
    margin:20px auto;
    padding-bottom:20px;
    font:normal 24px/30px Georgia, "Times New Roman", Times, serif;
    color:#333;
    text-shadow: 1px 2px 3px #ccc;
    border-bottom:1px solid #cbcbcb;
    -moz-animation:"draw"
}
#container {
    width:600px;
    margin:0 auto;
}
#myCanvas {
    background:#333;
    border:1px solid #2e2e2e;
}
#nav {
    display:block;
    width:100%;
    text-align:center;
}
#nav li {
    display:block;
    font-weight:bold;
    line-height:21px;
    text-shadow:1px 1px 1px #fff;
    width:100px;
    height:21px;
    padding:5px;
    margin:0 10px;
    background:#e0e0e0;
    border:1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    float:left;
}
#nav li a {
    color:#000;
    display:block;
    text-decoration:none;
    width:100%;
    height:100%;
}

JavaScript

var mtn = new Mtns('mtn');
                mtn.position = view.center;

                function getMask(tileRatio, topTab, rightTab, bottomTab, leftTab, tileWidth) {
                    var curvyCoords = [
                    0, 0, 35, 15, 37, 5,
                    37, 5, 40, 0, 38, -5,
                    38, -5, 20, -20, 50, -20,
                    50, -20, 80, -20, 62, -5,
                    62, -5, 60, 0, 63, 5,
                    63, 5, 65, 15, 100, 0];
                    var mask = new Path();
                    var tileCenter = view.center;
                    var topLeftEdge = new Point(-4, 4);
                    mask.moveTo(topLeftEdge);
                    for (var i = 0; i < curvyCoords.length / 6; i++) {
                        var p1 = topLeftEdge + new Point(curvyCoords[i * 6 + 0] * tileRatio,
                        topTab * curvyCoords[i * 6 + 1] * tileRatio);
                        var p2 = topLeftEdge + new Point(curvyCoords[i * 6 + 2] * tileRatio,
                        topTab * curvyCoords[i * 6 + 3] * tileRatio);
                        var p3 = topLeftEdge + new Point(curvyCoords[i * 6 + 4] * tileRatio,
                        topTab * curvyCoords[i * 6 + 5] * tileRatio);

                        mask.cubicCurveTo(p1, p2, p3);
                    }
                    var topRightEdge = topLeftEdge + new Point(tileWidth, 0);
                    for (i = 0; i < curvyCoords.length / 6; i++) {
                        p1 = topRightEdge + new Point(-rightTab * curvyCoords[i * 6 + 1] * tileRatio,
                        curvyCoords[i * 6 + 0] * tileRatio);
                        p2 = topRightEdge + new Point(-rightTab * curvyCoords[i * 6 + 3] * tileRatio,
                        curvyCoords[i * 6 + 2] * tileRatio);
                        p3 = topRightEdge + new Point(-rightTab * curvyCoords[i * 6 + 5] * tileRatio,
                        curvyCoords[i * 6 + 4] * tileRatio);

                        mask.cubicCurveTo(p1, p2, p3);
      ...