cc.sprite.create not working? cocos2d-html

I am new to Cocos2d-html5 v2.2.1 and I am trying to add a sprite (simple image) to the canvas. The code does add an image with the correct width and height but it is just black. I cant seem to find any errors so I am kinda stuck.

Any help would be great. My code is below:

In main.js i load the resources:

applicationDidFinishLaunching:function () {
    if(cc.RenderDoesnotSupport()){
        //show Information to user
        alert("Browser doesn't support WebGL");
        return false;
    }
    // initialize director
    var director = cc.Director.getInstance();

    //cc.EGLView.getInstance()._adjustSizeToBrowser();
    //cc.EGLView.getInstance()._resizeWithBrowserSize(true);
    //cc.EGLView.getInstance().setDesignResolutionSize(600, 400, cc.RESOLUTION_POLICY.SHOW_ALL);

    // set FPS. the default value is 1.0/60 if you don't call this
    director.setAnimationInterval(1.0 / this.config['frameRate']);

    //load resources
    cc.LoaderScene.preload(g_resources, function () {
        director.replaceScene(new this.startScene());
    }, this);

    return true;
}

g_resources is defined in resource.js:

var s_jet = "images/jet.png";
var s_character = "images/p1_front.png";
var g_resources = [
//image
{src:s_jet},
{src:s_character}];

spriteScene.js:

init:function () {
    var selfPointer = this;
    this._super();

    var size = cc.Director.getInstance().getWinSize();

    var lazyLayer = cc.LayerColor.create(new cc.Color4B(45, 50, 128, 255), 600, 600);
    //var lazyLayer = cc.Layer.create();
    lazyLayer.setAnchorPoint(new cc.Point(0.5,0.5));

    var characterSprite = cc.Sprite.create("./images/p1_front.png");
    lazyLayer.addChild(characterSprite, 0);

    this.addChild(lazyLayer);
    var rotateToA = cc.RotateTo.create(2, 0);
    var scaleToA = cc.ScaleTo.create(2, 1, 1);
    characterSprite.setPosition(new cc.Point(size.width/2,size.height/2));

I just dont understand why the sprite is just being drawn as a black box.

Edit: When I uncomment the line below from main.js; at first the image is still black but when I resize the browser, the image appears:-

cc.EGLView.getInstance().setDesignResolutionSize(600, 400, cc.RESOLUTION_POLICY.SHOW_ALL);

I dont know what this is implying.

Ok guys! I figured it out and I am pissed. Changed this line:

this.characterSprite.setPosition(new cc.Point(size.width/2,size.height/2));

to:

this.characterSprite.setPosition(cc.p(size.width/2, size.height/2));

Documentation/tutorials for cocos2d-html5 are outdated and this is getting frustrating.