raster.on is not a function - Paper.js

I can't seem to get any output from the project I'm working on with paper.js

Doesn't seem to recognise raster.on as a function for some reason... Could anyone help me as to why the error is being displayed says not a function?

I've tried initialising the paperscript in a couple different ways (or what I thought I have - as very much a newbie).

Any help would be VERY much appreciated, been trying this last 3-4 days with no luck and a lot of trailing and error with no joy... boooooo :'(

Please see js fiddle below:

js fiddle - raster.on not a function

/*Paper JS Setup for working in CodePen */
/* ====================== *
 *  0. Initiate Canvas    *
 * ====================== */
 
// expose paperjs classes into global scope
paper.install(window);

// bind paper to the canvas
paper.setup('canvas');
 
// Only executed our code once the DOM is ready.
window.onload = function() {
        // Get a reference to the canvas object
        var canvas = document.getElementById('myCanvas');


    

// Create a raster item using the image tag with id='mona'
var raster = new Raster('mona');

// Hide the raster:
raster.visible = false;

// The size of our grid cells:
var gridSize = 12;

// Space the cells by 120%:
var spacing = 1.2;

// As the web is asynchronous, we need to wait for the raster to     load
// before we can perform any operation on its pixels.
raster.on('load', function() {
    // Since the example image we're using is much too large,
    // and therefore has way too many pixels, lets downsize it to
    // 40 pixels wide and 30 pixels high:
    raster.size = new Size(40, 30);

    for (var y = 0; y < raster.height; y++) {
        for(var x = 0; x < raster.width; x++) {
            // Get the color of the pixel:
            var color = raster.getPixel(x, y);

            // Create a circle shaped path:
            var path = new Path.Circle({
                center: new Point(x, y) * gridSize,
                radius: gridSize / 2 / spacing,
                fillColor: 'black'
            });

            // Scale the path by the amount of gray in the pixel     color:
            path.scale(1 - color.gray);
        }
    }

    // Move the active layer to the center of the view, so all 
    // the created paths in it appear centered.
    project.activeLayer.position = view.center;
});
}

As explained in the documentation for raster, you should use raster.onLoad attribute:

raster.onLoad = function() {
    console.log('The image has loaded.');
};