HTML5 Canvas Set Fill with KineticJS

To fill a shape with KineticJS, we can set the fill property when we instantiate a shape, or we can use the setFill() method. KineticJS supports colors, patterns, linear gradients, and radial gradients.

Instructions: Mouseover each pentagon to change its fill. You can also drag and drop the shapes.

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 loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        // get num of sources
        for(var src in sources) {
          numImages++;
        }
        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      function draw(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

var colorPentagon = new Kinetic.RegularPolygon({
          x: 80,
          y: stage.getHeight() / 2,
          sides: 5,
          radius: 70,
          fill: 'red',
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

var patternPentagon = new Kinetic.RegularPolygon({
          x: 220,
          y: stage.getHeight() / 2,
          sides: 5,
          radius: 70,
          fillPatternImage: images.darthVader,
          fillPatternOffset: [-220, 70],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

var linearGradPentagon = new Kinetic.RegularPolygon({
          x: 360,
          y: stage.getHeight() / 2,
          sides: 5,
          radius: 70,
          fillLinearGradientStartPoint: [-50, -50],
          fillLinearGradientEndPoint: [50, 50],
          fillLinearGradientColorStops: [0, 'red', 1, 'yellow'],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

var radialGradPentagon = new Kinetic.RegularPolygon({
          x: 500,
          y: stage.getHeight() / 2,
          sides: 5,
          radius: 70,
          fillRadialGradientStartPoint: 0,
          fillRadialGradientStartRadius: 0,
          fillRadialGradientEndPoint: 0,
          fillRadialGradientEndRadius: 70,
          fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue'],
          stroke: 'black',
          strokeWidth: 4,
          draggable: true
        });

/*
         * bind listeners
         */
        colorPentagon.on('mouseover touchstart', function() {
          this.setFill('blue');
          layer.draw();
        });

colorPentagon.on('mouseout touchend', function() {
          this.setFill('red');
          layer.draw();
        });

patternPentagon.on('mouseover touchstart', function() {
          this.setFillPatternImage(images.yoda);
          this.setFillPatternOffset(-100, 70);
          layer.draw();
        });

patternPentagon.on('mouseout touchend', function() {
          this.setFillPatternImage(images.darthVader);
          this.setFillPatternOffset(-220, 70);
          layer.draw();
        });

linearGradPentagon.on('mouseover touchstart', function() {
          this.setFillLinearGradientStartPoint(-50);
          this.setFillLinearGradientEndPoint(50);
          this.setFillLinearGradientColorStops([0, 'green', 1, 'yellow']);
          layer.draw();
        });

linearGradPentagon.on('mouseout touchend', function() {
          // set multiple properties at once with setAttrs
          this.setAttrs({
            fillLinearGradientStartPoint: [-50, -50],
            fillLinearGradientEndPoint: [50, 50],
            fillLinearGradientColorStops: [0, 'red', 1, 'yellow']
          });
          layer.draw();
        });

radialGradPentagon.on('mouseover touchstart', function() {
          this.setFillRadialGradientColorStops([0, 'red', 0.5, 'yellow', 1, 'green']);
          layer.draw();
        });

radialGradPentagon.on('mouseout touchend', function() {
          // set multiple properties at once with setAttrs
          this.setAttrs({
            fillRadialGradientStartPoint: 0,
            fillRadialGradientStartRadius: 0,
            fillRadialGradientEndPoint: 0,
            fillRadialGradientEndRadius: 70,
            fillRadialGradientColorStops: [0, 'red', 0.5, 'yellow', 1, 'blue']
          });
          layer.draw();
        });

layer.add(colorPentagon);
        layer.add(patternPentagon);
        layer.add(linearGradPentagon);
        layer.add(radialGradPentagon);
        stage.add(layer);
      }
      var sources = {
        darthVader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };

loadImages(sources, function(images) {
        draw(images);
      });

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

< Label Stroke >

More Examples

No Related Post

Modified on April 9th, 2013 by Eric Rowell