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!

Answer 2

When dealing with making a canvas object full screen if on mobile. In CocoonJS this feature is out of the box. So we patched the code to set

document.body.style.width

and

document.body.style.height

These are DOM related and not supported (nor needed on full screen mode). Also code related to canvas style and position was patched, since it isn’t needed.

For now on, the correct way of getting screen size is

window.innerWidth

and

window.innerHeight

To make your Canvas objects full screen, set

canvas.width= window.innerWidth; canvas.height= window.innerHeight

One thing you must know about CocoonJS is that you don’t have to change your canvas size to make it run fullscreen. CocoonJS will up/down scale your canvas and have correct touch coordinates sent. You could choose how you’d like your canvas to be scaled, either keeping aspect ratio or not, and also if you want to have no blurring filter applied to the scaling operation, which comes handy for games relying on pixel art. Refer to the official CocoonJS Wiki pages to know how to control scale operations.

REFERENCE

http://blog.ludei.com/cocoonjs-a-survival-guide/