Search code examples
javascripthtmlcanvaskineticjs

Does KineticJS allow to redraw only recently updated part of layer?


After updating the layer in KineticJS, we make layer.draw();.

This causes all the layer to be drawn again.

What if we know the part of the layer to be updated?

  • Can't we just redraw that part so that we improve the performance, just as we do in canvas?

Note that these questions does not address the same:

kineticjs layers redraw optimization

KineticJS, can I just redraw one shape? (drawing on canvas)


Solution

  • You can do this only if your node is placed separatly from other nodes. That means that there are no other nodes under or on top of your first node. (Or, if you have other nodes very close, you may redraw them also.)

    layer.clear({
      x : rect.x(),
      y : rect.y(),
      width : rect.width(),
      height : rect.height()
    });
    rect.fill('green');
    rect.draw();
    

    demo: http://jsbin.com/heyox/1/edit