I need help resizing my canvas for multi resolution support

I need help resizing my canvas for multi resolution support
0.0 0


Hello to all!

I have a problem in the development of my application and i hope that somebody of here can help me. :slight_smile:

I’m developing a cocos2d-html5 application that only work in landscape mode.
Initially i worked with a fixed canvas of 1024x768 and i developed all my application without problems

<canvas id="gameCanvas" width="1024" height="768"></canvas>

you can see the result in: http://pedagogiaescolar.com/where-s-timmy/

Now i’m developing a extension of this application for support a low resolutions (only in landscape mode) and i want to use the same images that i had originally (i don’t want have different images for the different resolutions)

i get my idea of this page:
but i can’t perform it.

I do the following:

Index.html: Principally i set the size of my canvas (scaled size) according with the original size (1024*768)


    <!-- Standard -->
    <meta charset="utf-8">
    <title>WHERE IS TIMMY</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <link rel="stylesheet" href="css/style.css" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

      <div id="landscapeContent">
           <canvas id="gameCanvas" width="1024" height="768"></canvas>

<script type="text/javascript">
   var canvas = document.getElementById('gameCanvas'),context = canvas.getContext('2d');
   var screenWidth = window.innerWidth;
   var screenHeight = window.innerHeight;

   var designWidth = 1024;
   var designHeight= 768;

   if (screenHeight> screenWidth){
       var screenWidth = window.innerHeight
       var screenHeight = window.innerWidth;
   if (screenWidth > designWidth && screenHeight>designHeight){
       canvas.width = designWidth;
       canvas.height = designHeight;
   }else if (screenWidth > designWidth && screenHeight < designHeight){
       canvas.width = getWidthScaled(screenHeight,designHeight,designWidth);
       canvas.height = screenHeight;
   } else if(screenHeight > designHeight && screenWidth < designWidth){
       canvas.width = screenWidth
       canvas.height = getHeightScaled(screenWidth,designWidth,designHeight);
       var designAuxWidth = designWidth;
       var designAuxHeight = designHeight;
       var percent = 99;
       while (designAuxWidth > screenWidth || designAuxHeight > screenHeight){
           designAuxWidth = ((designWidth * percent)/100);
           designAuxHeight= getHeightScaled(((designWidth * percent)/100),designWidth,designHeight);
           if (percent ==0)
       canvas.width = designAuxWidth;
       canvas.height = designAuxHeight;
<script src="cocos2d.js"></script>

main.js: here i set the director.setContentScaleFactor and cc.EGLView.getInstance().setDesignResolutionSize according with the new canvas size.

`var cocos2dApp = cc.Application.extend({
ctor:function (scene) {
this.startScene = scene;
cc.COCOS2D_DEBUG = this.config[‘COCOS2D_DEBUG’];
applicationDidFinishLaunching:function () {
alert(“Browser doesn’t support Canvas or WebGL”);
return false;

    var director = cc.Director.getInstance();
    var designSize = cc.EGLView.getInstance().getFrameSize();
    var resourceSize = cc.size(1024, 768);

    director.setContentScaleFactor(resourceSize.width / designSize.width);
    cc.EGLView.getInstance().setDesignResolutionSize(designSize.width, designSize.height, cc.RESOLUTION_POLICY.SHOW_ALL);

    director.setAnimationInterval(1.0 / this.config['frameRate']);

    //load resources
    cc.LoaderScene.preload(g_ressources, function(){
        director.replaceScene(cc.TransitionFade.create(transitionTime*2,new this.startScene(),cc.c3b(255, 255, 255)));
    }, this);

    return true;

var myApp = new cocos2dApp(bookScene);`

All of this seems not work correctly.

You can see the result here: http://pedagogiaescolar.com/where-s-timmy-full/
(in mobile device isn’t scaled good)

Thanks in advance!

PD: Sorry for my english.


Hi Emili,

I’m sorry for my reply late.

I found that the engine version of you’re using is v2.1.4, it is very old version.

I think you should update the engine to the latest version from github or official website.

Here is the update guide about multiple resolution: http://www.cocos2d-x.org/wiki/Upgrade_Guide_from_Cocos2d-html5_v22_to_v221

Best regards