Cannot read property 'style' of null

Cannot read property 'style' of null
0.0 0


I didn’t do anything except including the minified version of cocos2d after downloading the stable release… and i’m getting this:

Uncaught TypeError: Cannot read property 'style' of null cocos2d.min.js:1568
(anonymous function) cocos2d.min.js:1568
(anonymous function) cocos2d.min.js:1569



Hi Grady,

Could you please give me some codes or a demo to reproduce the error?

The minified version works well in my HelloWorldApp and Testcases app.


Hi, Grady

I have done some search in the minified js file, it seem that the problem is related to the canvas node’s style. So can you show us your cocos2d configuration file? Normally it’s named cocos2d.js



I am getting the same error on my project when the canvas is loaded from a separate template will only happen now and then in the browser but it will not load at all when i deploy to android might be worth noting i am deploying it within cordova/phonegap using ionic sdk as i only want the canvas to be on one page of the app. I imagine the problem is the canvas is taking to long to load some of the time but i can’t work out a way to fix it.

Code Example

    <meta charset="utf-8">
    <title>Cocos2d-html5 Hello World test</title>
    <link rel="icon" type="image/GIF" href="res/favicon.ico"/>
    <meta name="viewport" content="width=321,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="full-screen" content="yes"/>
    <meta name="screen-orientation" content="portrait"/>
    <meta name="x5-fullscreen" content="true"/>
    <meta name="360-fullscreen" content="true"/>
        body, canvas, div {
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    <!-- cocos2d js -->
    <script src="lib/cocos2d-html5/CCBoot.js"></script>
    <script src="lib/cocos2d-html5/template/main.js"></script>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app's js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
    <script src="js/media-player.js"></script>
    <body ng-app="starter">

        <ion-content class="has-header style="padding:0; margin: 0; scroll="false">
            <canvas id="gameCanvas" width="1024" height="480"></canvas>