Spritesheet animations in cocos2d html5

var cache = cc.SpriteFrameCache.getInstance();
cache.addSpriteFrames("boy.plist", "Art/boy.png");
var boy = cc.Sprite.createWithSpriteFrameName("boy1.png");
boy.setScale(0.5);
boy.setPosition(400,354);
this.addChild(boy);

var animFrames = [];
var frame = null;
for(var i=1;i<=4; i++){
frame = cache.getSpriteFrame("boy"+i+".png");
animFrames.push(frame);
}
var animation = cc.Animation.create(animFrames, 0.3);
animation.setLoops(10);
animation.setRestoreOriginalFrame(true);
var animAction=cc.Animate.create(animation)
boy.runAction(animAction);

Switch to full screen mode in HTML 5

Use this code for switch to fullscreen in html5 games. Add the following lines in a button action function

var canvas = document.getElementById("gameCanvas");
    		if(canvas.requestFullScreen)
        		canvas.requestFullScreen();
    		else if(canvas.webkitRequestFullScreen)
        		canvas.webkitRequestFullScreen();
    		else if(canvas.mozRequestFullScreen)
        		canvas.mozRequestFullScreen();

Take print of a canvas in HTML 5 Javascript

Following code is for taking screenshot and print it using javascript

//image capture
		var theCanvas = document.getElementById("gameCanvas"); 
		cc.log("createImageDataPressed");
		var printWin = window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width=" +theCanvas.width + ",height=" + theCanvas.height +",toolbar=0,resizable=0"); 
		printWin.focus();
    	printWin.print();

How to create a MenuItem in cocos2d html5

this.colorImageArray = new Array();        
colorMenu = cc.Menu.create(null);
     	for(var i=0; i<15; i++){
        	var colorImg = cc.MenuItemImage.create(color_list[i], color_list[i], "colorAction", this);
               	colorImg.setPosition(new cc.Point(40+i*70, 38));
               	colorImg.tag = i+1;
        	this.colorImageArray.push(colorImg);
        	colorMenu.addChild(colorImg,2,1);
        }
    	colorMenu.setPosition(new cc.Point(0,0));
    	this.transbg.addChild(colorMenu);

Sequence action with CallFunction of sprite in cocos2d html5

var actionMove = cc.MoveTo.create(0.5, cc.p(colorbg.getPosition().x - 395, colorbg.getPosition().y));
colorbg.runAction(cc.Sequence.create(cc.CallFunc.create(function(){this.touchFunction(false)}, this), 
                                actionMove,
                                cc.CallFunc.create(function(){ this.touchFunction(true)},
                                this)));

touchFunction:function(bool){
    	if( 'touches' in sys.capabilities ) {
		  this.setTouchEnabled(bool);
		  this.nextbackFlag = bool;
		}
		if( 'mouse' in sys.capabilities ) {
		  this.setMouseEnabled(bool);
		  this.nextbackFlag = bool;
		}

Draw image on to the HTML5 canvas

The following example will show you how to draw image on to the canvas:


<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

</script>

</body>
</html>

Creating gradients using HTML5

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"orange");
grd.addColorStop(1,"green");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

</script>

</body>
</html>