Kinetic JS -- toDataURL - stage different from captured drawing size

Question

I spent a couple hours trying to figure this one out. I'll make it easy for you.

     stage.toDataURL({

      callback: function(dataUrl) {

        // testing
        /*
         * here you can do anything you like with the data url.
         * In this tutorial we'll just open the url with the browser
         * so that you can see the result as an image
         */

        window.open(dataUrl);

      }

    });

I am allowing users to create custom shapes by drawing with the mouse using Kinetic JS. When the custom shape is created, it is added to the stage as vector information, then I need to create an image of it, to add to the user interface in order to allow them to 'click to remove' the shape. Or, 'click to re-add' the shape.

The problem was, I couldn't figure out why the shape was 'cut off'. The issue was, when drawing in Kinetic, you can draw 'beyond' the actual layer size. The stage will record this and draw it, but when you export to dataURL, it does not keep it.

I wonder if this is a (bug) (something not considered) or (intentional) ?

working demo ---

http://jsfiddle.net/JSdc2/6WUTy/10/

Answer 1

You should not change width or height of layer. Remove such code and you will see what you need http://jsfiddle.net/6WUTy/11/.

So you image was cuted by your size.