Kinetic js Sprite Vs Image Draw (v2)

Revision 2 of this benchmark created on

Description

Compares performance of Kineticjs Sprite Animation render performance vs Image Draw With Crop

Preparation HTML

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js">
</script>
<div id="container" style="width:600px;height:400px">
</div>
<script>
/*
  Kinetic.Image.prototype.drawFunc = function(canvas) {
    var width = 192,
        height = 224,
        params, that = this,
        context = canvas.getContext(),
        crop = this.getCrop(),
        cropX, cropY, cropWidth, cropHeight, image;
    image = this.getImage();
    if (image) {
      // if cropping
      if (crop) {
        cropX = crop.x || 0;
        cropY = crop.y || 0;
        cropWidth = crop.width || 0;
        cropHeight = crop.height || 0;
        params = [image, cropX, cropY, cropWidth, cropHeight, 0, 0, width, height];
      } else {
        params = [image, 0, 0, width, height];
      }
      this._drawImage(context, params);
    }
  };
*/
  var stage = new Kinetic.Stage({
    container: 'container',
    width: 600,
    height: 300
  });

  var spriteLayer = new Kinetic.Layer();
  var imageLayer = new Kinetic.Layer();
  stage.add(spriteLayer);
  stage.add(imageLayer);

  var animations = {
    walkCycle: []
  };

  for (var idx = 0; idx <= 5; idx++) {
    animations.walkCycle.push({
      height: 224,
      width: 192,
      x: idx * 192,
      y: 0
    });
  }

  var imageObj = new Image(),
      blob;
  imageObj.onload = function() {
    blob = new Kinetic.Sprite({
      x: 0,
      y: 0,
      image: imageObj,
      animation: 'walkCycle',
      animations: animations,
      frameRate: 7,
      index: 0
    });
    spriteLayer.add(blob);

    kImg = new Kinetic.Image({
      x: 200,
      y: 0,
      width: 192,
      height: 224,
      image: imageObj,
      crop: {
        x: 0,
        y: 0,
        width: 192,
        height: 224
      }
    });

    imageLayer.add(kImg);
    drawImageLayer();
    drawSpriteLayer();

  };

  imageObj.src = 'http://www.swingswingsubmarine.com/wp-content/uploads/2010/11/dude_animation_sheet.png';

  function drawSpriteLayer() {
    blob._updateIndex()
    spriteLayer.draw();
  }

  var pos = 0;

  function drawImageLayer() {
    pos++;
    if(pos > 5 ){pos = 0}
    var start =  pos * 192;

    kImg.setCrop({
      x: start,
      y: 0,
      width: 192,
      height: 224
    })
    imageLayer.draw();
  }
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
drawSprite()
drawSpriteLayer()
ready
drawImage
drawImageLayer()
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.