Scaling KineticJS canvas with CocoonJS idtkscale

Question

I got my KineticJS game working inside CocoonJS quite nicely, except scaling the canvas. I have 1024x768 canvas, which is great for iPad 2. But for iPad 4, due to retina screen, the game takes only 1/4th of the screen.

CocoonJS says this about the scaling:

CocoonJS automatically scales your main canvas to fill the whole screen while you still 
continue working on your application coordinates. There are 3 different ways to specify how
the scaling should be done:

idtkScale
 'ScaleToFill' // Default
 'ScaleAspectFit'
 'ScaleAspectFill'

 canvas.style.cssText="idtkscale:SCALE_TYPE;"; // The SCALE_TYPE can be any of 
 the ones listed above.

I have tried this adding this:

layer.getCanvas()._canvas.style.cssText='idtkScale:ScaleAspectFit;';

But it is not working. Any idea how to get KineticJS created Canvases to scale in CocoonJS?

Answer 1

Okay, I found an answer to this question myself and since there are so many up votes, I want to share the solution.

The solution was to comment some code within KineticJS and then add the CocoonJS scaling to the canvas creation.

1. Comment these lines (not all at one place):

inside _resizeDOM:

this.content.style.width = width + PX;
this.content.style.height = height + PX;

inside setWidth of Canvas:

this._canvas.style.width = width + 'px';

inside setHeight of Canvas:

this._canvas.style.height = height + 'px';

1. Add this inside Canvas prototype init:

    this._canvas.style.idtkscale = "ScaleAspectFill";
   

This does the trick for me. Now what I do is I calculate the correct aspect ratio for the canvas and let CocoonJS scale it for me. Hope this is as useful for others as it has been for me!