HTML5 Canvas Expand Image on Hover

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>
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        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 drawImages(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 578,
          height: 200
        });
        var layer = new Kinetic.Layer();

// darth vader
        var width = 200;
        var height = 137;
        var darthVaderImg = new Kinetic.Image({
          image: images.darthVader,
          offset: [width / 2, height / 2],
          width: width,
          height: height
        });

darthVaderImg.on('mouseover', function() {
          this.setScale(1.2);
          stage.draw();
        });
        darthVaderImg.on('mouseout', function() {
          this.setScale(1);
          stage.draw();
        });

darthVaderImg.setPosition(200, 100);
        layer.add(darthVaderImg);

// yoda
        var width = 93;
        var height = 104;
        var yodaImg = new Kinetic.Image({
          image: images.yoda,
          offset: [width / 2, height / 2],
          width: width,
          height: height
        });

yodaImg.on('mouseover', function() {
          this.setScale(1.2);
          stage.draw();
        });
        yodaImg.on('mouseout', function() {
          this.setScale(1);
          stage.draw();
        });

yodaImg.setPosition(400, 100);
        layer.add(yodaImg);

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, drawImages);

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

< Curve Detection Planets Image Map >

More Examples

Modified on January 31st, 2013 by Eric Rowell