Draw on top of an image

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.18/paper-full.min.js"></script>
<div id="colors">
    <div data-color="red"></div>
    <div data-color="orange"></div>
</div>
<div class="wrapper">
    <canvas id="control-plan" width="400" height="300">Your browser doesn't support the needed items to draw on the map</canvas>
</div>
<div id="lineTypes">
    <button data-line-type="solid">Solid</button>
    <button data-line-type="dashed">Dashed</button>
</div>
<div>
    <button id="stop-drawing" type="button">Alter</button>
</div>
<img id="canvasSource" src="http://www.placekitten.com/g/400/300" style="visibility: hidden" />

CSS

.wrapper {
    float: left;
    border: 1px black solid;
}
.wrapper:after, #colors:after {
    clear: both;
}
#colors {
    width: 40px;
    float: left;
}
#colors[data-color] {
    width: 18px;
    height: 18px;
    margin-bottom: 10px;
    cursor: pointer;
    border: 1px black solid;
}

JavaScript

paper.install(window);

paper.setup('control-plan');

//Center the image
new Raster('canvasSource').position = view.center;

//Add icon & text 
var tools = {
    Polyline: function () {
        var toolName = 'Polyline',
            toolIcon,
            $ = this,
            tool = new Tool(),
            pathReset = false,
            path;

        $._createPath = function () {
            var p = new Path();

            p.strokeColor = 'black';

            return p;
        };

        tool.onMouseDown = function (event) {
            if (!path) {
                path = $._createPath();
            }

            if (event.event.detail > 1) {
                path = $._createPath();
                pathReset = true;

                return;
            }

            path.add(event.point);
        }

        tool.onMouseDrag = function (event) {
            var l = path.segments.length;

            //If there is only one point we just started drawing, so we want to keep the segment so the user gets feed back on their path
            if (l > 1) {
                //Remove the last segment as it was used to provide feedback on dragging
                path.removeSegments(l - 1, l);
            }

            path.add(event.point);
        };

        tool.onMouseUp = function (event) {
            if (pathReset) {
                pathReset = false;

                return;
            }

            //Remove the last segment as it was used to provide feedback on dragging
            var l = path.segments.length;

            path.removeSegments(l - 1, l);
            path.add(event.point);
        };

        return tool;
    },

    Selector: function (hitOptions) {
        var toolName = 'Selector',
            tool = new Tool(),
            $ = this,
            path,
            options = hitOptions || _defaultHitOptions;

        _defaultHitOptions = {
            segments: true,
            stroke: true,
            fill: true,
            tolerance: 5
...