jCanvas - setPixels()

Question

Everything works great with jCanvas except for one thing. I can't get setPixels () to work, when I run the code in Chrome and Safari, nothing happens.

I have copied the example code from the Sandbox on jCanvas website (where everything works when I look in the browser).

Anyone have a suggestion on what I may have done wrong?

<canvas id="canvas" width="520" height="520"></canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="http://projects.calebevans.me/jcanvas/resources/jcanvas/jcanvas.js"></script>

<script type="text/javascript">

function invert() {
  $(this).setPixels({
    x: 150, y: 100,
    width: 220, height: 138,
    // loop through each pixel
    each: function(px) {
      px.r = 255 - px.r;
      px.g = 255 - px.g;
      px.b = 255 - px.b;
    }
  });
}

$('canvas').drawImage({
  source: 'images/fish.jpg',
  x: 150, y: 100,
  // Invert image color when image loads
  load: invert
});

</script>