HTML5 Canvas Shape Events with KineticJS

To detect shape events with KineticJS, we can use the on() method to bind event handlers to a node. The on() method requires an event type and a function to be executed when the event occurs. KineticJS supports mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, click, dblclick, dragstart, and dragend desktop events.

Instructions: Mouseover and mouseout of the triangle, and mouseover, mouseout, mousedown, and mouseup over the circle.

Open in new window

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.1.min.js"></script>
    <script defer="defer">
      function writeMessage(messageLayer, message) {
        var context = messageLayer.getContext();
        messageLayer.clear();
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
      }
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });
      var shapesLayer = new Kinetic.Layer();
      var messageLayer = new Kinetic.Layer();

var triangle = new Kinetic.RegularPolygon({
        x: 190,
        y: 120,
        sides: 3,
        radius: 80,
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 4
      });

triangle.on('mouseout', function() {
        writeMessage(messageLayer, 'Mouseout triangle');
      });

triangle.on('mousemove', function() {
        var mousePos = stage.getMousePosition();
        var x = mousePos.x - 190;
        var y = mousePos.y - 40;
        writeMessage(messageLayer, 'x: ' + x + ', y: ' + y);
      });

shapesLayer.add(triangle);

var circle = new Kinetic.Circle({
        x: 380,
        y: stage.getHeight() / 2,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      });

circle.on('mouseover', function() {
        writeMessage(messageLayer, 'Mouseover circle');
      });
      circle.on('mouseout', function() {
        writeMessage(messageLayer, 'Mouseout circle');
      });
      circle.on('mousedown', function() {
        writeMessage(messageLayer, 'Mousedown circle');
      });
      circle.on('mouseup', function() {
        writeMessage(messageLayer, 'Mouseup circle');
      });

shapesLayer.add(circle);

stage.add(shapesLayer);
      stage.add(messageLayer);
    </script>
  </body>
</html>

< Hide and Show Image Events >

More Examples

Modified on April 9th, 2013 by Eric Rowell