Untitled

<!DOCTYPE HTML>
<html>

  <head>
    <meta charset="utf-8">
    <style type="text/css">
      #myCanvas {
        border: 1px solid #c3c3c3;
      }
      #xycoordinates {
        font: 9pt sans-serif;
      }
    </style>
    <script type="text/javascript" src="http://paperjs.org/static/js/paper.js"></script>
  </head>

  <body>
    <canvas id="myCanvas" width="256" height="128"></canvas>
    <div id="xycoordinates"></div>
    <script type="text/javascript">
      var canvas = document.getElementById("myCanvas"); // Get canvas

       // Some initialisation stuff to make things work out of PaperScript context
       // Have to have things to be done this way because jsfiddle don't allow to save source with script type="text/paperscript"
      paper.install(window);
      paper.setup(canvas);

      var myPath = new paper.Path.Circle([64, 64], 32); // Red one, with 'pointer' cursor on it
      myPath.style = {
        fillColor: '#FF0000'
      };
      var scndPath = new paper.Path.Circle([192, 64], 32); // Green one, without cursor accent
      scndPath.style = {
        fillColor: '#00FF00'
      };
      paper.view.draw(); // Have to call manually when working from JavaScript directly

      var hitOptions = { // Trigger hit only on 'fill' part of the path with 0 tolerance
        segments: false,
        stroke: false,
        fill: true,
        tolerance: 0
      };

      var tooll = new paper.Tool(); // Again manually. Life is much easier with script type="text/paperscript"
      tooll.onMouseMove = function (event) { // Installig paperjs event
        var x = event.point.x;
        var y = event.point.y;

        document.getElementById("xycoordinates").innerHTML = "Coordinates: (" + x + "," + y + ")";

        var hitResult = myPath.hitTest(event.point, hitOptions); // isPointInPath

        if (hitResult) {
          document.body.style.cursor = "pointer";
        } else {
          document.body.style.cursor = "default";
        }
      };
    </script>
  </body>

</html>