CODEWITHSUNDEEP
kineticjs
Sushen
Sushen

Reputation: 43

Can't control layer's canvas size with KineticJS

I'm using KineticJS and I want to use many small layers to gain performance for intensive drawings, but I found out (with firebug) that setting individual layer size just don't adjust their respective canvas size: all the created canvases have the stage dimension!

This is not a problem with a small stage (at least with not too many layers), but with a huge stage and near a hundred layers wouldn't there be a performance issue ?

In other words, is this a wanted feature or a bug ?

Here is a simple test code :

var stage = new Kinetic.Stage({
    container: 'main',
    width: 400,
    height: 400,
});
for (var i=0; i<5; i++) {
    var layer = new Kinetic.Layer({
        x:i*30+10,
        y:i*30+10,
        width:20,
        height:20,
    });
    layer.add( new Kinetic.Rect({
        width: 20,
        height: 20,
        fill: 'red',
    }));
    stage.add(layer);

    // trying to force layer dimensions
    layer.setWidth(20);
    layer.setHeight(20);
}
stage.draw();

And here, what I see when looking at the DOM :

<div id="main">
    <div style="position: relative; display: inline-block; width: 400px; height: 400px;" class="kineticjs-content">
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
        <canvas width="400" style="width: 400px; height: 400px; position: absolute;" height="400"></canvas>
    </div>
</div>

Upvotes: 0

Views: 1764

Answers (1)

markE
markE

Reputation: 105015

Yes, you can’t control the size of a layer’s canvas

And yes, you will get a big performance hit with hundreds of layers (= hundreds of full-sized canvases).

Layers are always the same size as their stage—even if you set a lesser width/height. The width/height properties are inherited from Kinetic.Node and appear to be ineffective.

Also a layer with a fixed width will allow a shape to “bleed” out of that layer (the shape will not be clipped into that layer).

So…layers created in moderation are great for:

  • layering objects that require similar redraw schedules,
  • z-indexing,
  • redraw performance benefits.

Eric Rowell, KineticJS creator, did this stress test: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

And he says this:

Create 10 layers each containing 1000 shapes to create 10,000 shapes. This greatly improves performance because only 1,000 shapes will have to be drawn at a time when a circle is removed from a layer rather than all 10,000 shapes. Keep in mind that having too many layers can also slow down performance. I found that using 10 layers each made up of 1,000 shapes performs better than 20 layers with 500 shapes or 5 layers with 2,000 shapes.

Upvotes: 2

Related Questions