HTML5 Canvas KineticJS Blob Tutorial

To create blobs with KineticJS, we can instantiate a Kinetic.Blob() object. Blobs are defined with an array of points and a tension which controls the curviness of the interpolation. For a full list of attributes and methods, check out the Kinetic.Blob documentation.

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://www.html5canvastutorials.com/libraries/kinetic-v4.5.2-beta.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

var layer = new Kinetic.Layer();

var blueBlob = new Kinetic.Blob({
        points: [{
          x: 73,
          y: 140
        }, {
          x: 340,
          y: 23
        }, {
          x: 500,
          y: 109
        }, {
          x: 300,
          y: 170
        }],
        stroke: 'blue',
        strokeWidth: 10,
        fill: '#aaf',
        tension: 0.8
      });

var redBlob = new Kinetic.Blob({
        points: [{
          x: 73,
          y: 140
        }, {
          x: 340,
          y: 23
        }, {
          x: 500,
          y: 109
        }],
        stroke: 'red',
        strokeWidth: 10,
        fill: '#faa',
        tension: 1.2,
        scale: 0.5,
        x: 100,
        y: 50
      });

layer.add(blueBlob);
      layer.add(redBlob);
      stage.add(layer);

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

< Spline Custom >

More Examples

No Related Post

Modified on May 17th, 2013 by Eric Rowell