HTML5 Canvas Interactive Flower

Instructions: pick the petals from the flower and move the flower by dragging and dropping its center

Code Editor

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      #container {
        background-image: url("http://www.html5canvastutorials.com/demos/assets/lines.jpg");
        width: 580px;
        height: 202px;
      }
    </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">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

var lineLayer = new Kinetic.Layer();
      var flowerLayer = new Kinetic.Layer();

var flower = new Kinetic.Group({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        draggable: true
      });

// build stem
      var stem = new Kinetic.Line({
        strokeWidth: 10,
        stroke: 'green',
        points: [{
          x: flower.getX(),
          y: flower.getY()
        }, {
          x: stage.getWidth() / 2,
          y: stage.getHeight() + 10
        }]
      });

// build center
      var center = new Kinetic.Circle({
        x: 0,
        y: 0,
        radius: 20,
        fill: 'yellow',
        stroke: 'black',
        strokeWidth: 4
      });

center.on('mouseover', function() {
        this.setFill('orange');
        flowerLayer.draw();
        document.body.style.cursor = 'pointer';
      });

center.on('mouseout', function() {
        this.setFill('yellow');
        flowerLayer.draw();
        document.body.style.cursor = 'default';
      });
      // build petals
      var numPetals = 10;
      for(var n = 0; n < numPetals; n++) {
        // induce scope
        ( function() {
          /*
           * draw custom shape because KineticJS
           * currently does not support tear drop
           * geometries
           */
          var petal = new Kinetic.Shape({
            drawFunc: function(canvas) {
              var context = canvas.getContext();
              context.beginPath();
              context.moveTo(-5, -20);
              context.bezierCurveTo(-40, -90, 40, -90, 5, -20);
              context.closePath();
              canvas.fillStroke(this);
            },
            opacity: 0.8,
            fill: '#00dddd',
            strokeWidth: 4,
            draggable: true,
            rotation: 2 * Math.PI * n / numPetals
          });

petal.on('mouseover', function() {
            this.setFill('blue');
            flowerLayer.draw();
          });

petal.on('mouseout', function() {
            this.setFill('#00dddd');
            flowerLayer.draw();
          });

flower.add(petal);
        }());
      }

stage.on('mouseup', function() {
        document.body.style.cursor = 'default';
      });

lineLayer.add(stem);
      flower.add(center);
      flowerLayer.add(flower);
      stage.add(lineLayer);
      stage.add(flowerLayer);

// keep stem in sync with center
      flowerLayer.on('draw', function() {
        stem.attrs.points[0] = flower.getPosition();
        lineLayer.draw();
      });

</script>
  </body>
</html>

< Interactive Building Map Curves with Anchors >

More Examples

Modified on January 6th, 2013 by Eric Rowell