raster drawing NO SVG trying to get no splatter

semi working yeah !

by Nick Hulea

HTML

<script src="http://cdn.eyahuska.com/paper.js"></script>
<canvas resize="true" id="canvas-1" style="width:100%;"></canvas>
<div id="idName"></div>
<script type="text/paperscript" canvas="canvas-1">
    var r, background;
    var rArray = [];
    var imagesArray = ['one.jpg', 'two.jpg', 'three.jpg', 'four.jpg', 'five.jpg'];

    var background = new Raster({
        source: 'http://cdn.eyahuska.com/seven.gif',
        position: view.center,
        size: view.bounds
    });
    background.on('load', function() {
        loaded = true;
        onResize();
    });
    var r = new Raster({
        source: 'http://cdn.eyahuska.com/five.jpg',
        position: view.center,
        size: view.bounds
    });
    r.on('load', function() {
        loaded = true;
        onResize();
    });
    path = new Path();
    g = new Group([path, r]);
    g.clipped = true;

    tool.fixedDistance = 30;

    var strokeEnds = 6;

    function onMouseDown(event) {
        init();
        path.position = event.point;
    }

    var lastPoint;

    var path2 = new Path.Circle({
        center: view.center,
        radius: 0,
        fillColor: 'red'
    });

    function onFrame(event) {
        path2.fillColor.hue += 1;
    }


    function onMouseDrag(event) {
        // If this is the first drag event,
        // add the strokes at the start:
        if (event.count == 1) {
            addStrokes(event.middlePoint, event.delta * -1);
        } else {
            var step = event.delta / 1;
            step.angle += 90;

            var top = event.middlePoint + step;
            var bottom = event.middlePoint - step;

            path.add(top);
            path.insert(0, bottom);
        }
        path.smooth();
        lastPoint = event.middlePoint;
    }

    function onMouseUp(event) {
        var delta = event.point - lastPoint;
        delta.length = tool.maxDistance;
        addStrokes(event.point, delta);
        path.closed = true;
        path.smooth();
    }

    function...

JavaScript

function preloadimages(arr) {
     var newimages = []
     var arr = (typeof arr != "object") ? [arr] : arr //force arr parameter to always be an array
     for (var i = 0; i < arr.length; i++) {
         newimages[i] = new Image()
         newimages[i].src = arr[i]
     }
 }
 preloadimages(['http://cdn.eyahuska.com/one.jpg', 'http://cdn.eyahuska.com/two.jpg', 'http://cdn.eyahuska.com/three.jpg', 'http://cdn.eyahuska.com/four.jpg', 'http://cdn.eyahuska.com/five.jpg']);