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?

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?

• javascript
• html
• canvas
• kineticjs
• cocoonjs

Share Improve this question Follow asked Dec 2, 2013 at 14:39 pillar15pillar15 57633 silver badges1111 bronze badges 7

• I'm not too familiar with CocoonJS, but when I built my game I just set the height and width of the stage to that of the window. Is this something possible to do for you? just by doing something like getStage().setHeight(document.innerHeight); ??? – SoluableNonagon Commented Dec 18, 2013 at 15:42
• This is a link to my game, cs.neiu.edu/~tsam/physics/index.phtml, you can view the source of the page to see the functionality (you can log in with test/test). – SoluableNonagon Commented Dec 18, 2013 at 15:44
• I'm not familiar with Cocoon, but maybe Cocoon change the width and height of your Kinetic Canvas and leave the scale intact. Try with the scale method of the Stage: Stage.scale({scalefactor, scalefactor}); – ElChiniNet Commented Jan 14, 2014 at 20:29
• The link you provided to your game doesn't seem to be working... – Adam Commented Jan 31, 2014 at 2:38
• 2 I wouldn't touch the cocoon JS Scaling. What I would do is try to match it using kinetic because kinetic will subsequently render your scenes/ characters etc. while cocoon just takes your <canvas> tag and scales it. It does no rendering – Dnaso Commented Feb 11, 2014 at 15:50

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 1

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 es 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./cocoonjs-a-survival-guide/

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 ment 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!