Search code examples
javascriptgoogle-chromecanvaskineticjs

KineticJS: Canvas disappeared after Chrome update

I'm working on a project using kineticJS to generate something like a rotateable pie char inside of a canvas element.

Everything worked well, until the last Chrome update came out. Since updating to version 35.0.1916.114 my canvas in Chrome is just blank. By viewing the code on the developer console, I can see that the generated width an height is set to 0 (just changing this values to a viewable size does not take effect xD). So I guess the content inside of the canvas is not just hidden but not getting generated at all.

Does anybody has the same problem since the update? Did the chrome team change anything which could take affekt like this? (I haven't found something obvious in the changelog so far..)

Solution

  • Warning: this is a trial-and-error solution that worked for me! I do not understand the internals so this could be really wrong. This new version of Chrome implements a new type of canvas object: Path2D (find out more here: http://www.rgraph.net/blog/2014/march/an-example-of-html5-canvas-path2d-objects.html) and in Kinetic's code around line 3849, there is a line-drawing method (stroke) which overwrites the context's stroke function and takes the context itself as the parameter. I found out after some debugging that that is where it gets stuck. Chrome 35 throws a very unhelpful error, but in Canary it says

    Failed to execute 'stroke' on 'CanvasRenderingContext2D': parameter 1 is not of type 'Path2D'

    And it's not happy because the context passed as a parameter (see below) is a CanvasRenderingContext2D object and this new version of Chrome will on only have it take a Path2D object. I don't know why Kinetic requires the context as the parameter (or maybe: why new Chrome just renders the last attempted shape draw) but if you change the line (Kinetic 4.0.0 around line 3849):

    context.stroke(context);

    to

    try{
        context.stroke(context);
} catch(e) {
        context.stroke();
}

    then it works. (Not a very technical explanation I know but it works for me...)