Canvas Introduction

HTML5 Canvas ( <canvas>) is a bitmap canvas used to add shapes, drawings, lines, rectangle, circle, gradient, and games using Javascript. Basically canvas is just a rectangular division on our webpage where we can use javascript to draw whatever we want.

A <canvas> element does not have any content inside, and no border even.


Create Canvas.

How to create a canvas element.


<canvas style="border:'solid 1px #ccc'" id="mycanvas">
</canvas>
		
<script>
    // script for canvas
    var canvas=document.querySelector("#mycanvas").getContext("2d");
</script>	
	

How Canvas look on browser


Canvas Javascript

As we have created Canvas element, lets start adding some javascript to call canvas element.


<canvas id="mycanvas" width="400" height="300"> </canvas>
		
<script>
	var c=document.querySelector('#mycanvas');
	var ctx=c.getContext("2d");
			
</script>			

Canvas Line

Lets draw a line in HTML5 Canvas Element.


<body>
	<div class="wrap">
		<canvas id="mycanvas" width="400" height="300">
			
		</canvas>
	</div>
<script>
    var c=document.querySelector('#mycanvas');
    var ctx=c.getContext("2d");
    ctx.moveTo(0,0);            // move pointer to coordinates where x=0 and y=0;
    ctx.lineTo(200,150);        // draw line to coordinates where x=200, and y=150
    ctx.stroke();               // draw outline of stroke
</script>	
</body>
</html>	
		

Letter box using Canvas

Lets start creating a Letter box using HTML5 canvas.


<body>
	<div class="wrap">
		<canvas id="mycanvas" width="400" height="300">
			
		</canvas>
	</div>
<script>
    var c=document.querySelector('#mycanvas');
    var ctx=c.getContext("2d");
    ctx.beginPath();            // canvas path is initilia
    ctx.moveTo(20,20);
    ctx.lineTo(200,120);
    ctx.lineTo(380,20);
    ctx.lineTo(20,20);
    ctx.lineTo(20,250);
    ctx.lineTo(380,250);
    ctx.lineTo(380,20);
    ctx.fillStyle="#ccc"        // fill color
    ctx.fill();                 // fill method
    ctx.strokeStyle="#f00";     // stroke color
    ctx.stroke();               // stroke method
    ctx.closePath();            // 
</script>	
</body>
</html>	
		

Fill Rectangle in Canvas

How to fill a rectangle in HTML5 canvas.


<body>
	<div class="wrap">
		<canvas id="mycanvas" width="400" height="300">
			
		</canvas>
	</div>
<script>
    var c=document.querySelector('#mycanvas');
    var ctx=c.getContext("2d");
    ctx.fillRect(0,0,400,300)
   
</script>	
</body>
</html>	
		

Create Circle in Canvas

How to create a circle in HTML5 canvas.


<body>
	<div class="wrap">
		<canvas id="mycanvas" width="400" height="300">
			
		</canvas>
	</div>
<script>
    var c=document.querySelector('#mycanvas');
    var ctx=c.getContext("2d");
    ctx.arc(200,150,50,0,2*Math.PI,false);
         
        /* create an arc where 200 is x-coordinate, 150 is y-coordinate, 50 is radius, 0 is starting angle of arc, 2*Math.PI or 2π is end angle and false is boolean for clock wise direction. 
          */ 
                                       
    ctx.fill()
   
</script>	
</body>
</html>	
		

Create Semi Circle in Canvas

How to create semi circle in HTML5 canvas.


<body>
	<div class="wrap">
		<canvas id="mycanvas" width="400" height="300">
			
		</canvas>
	</div>
<script>
    var c=document.querySelector('#mycanvas');
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(100,130,50,0,Math.PI,false);        // false for clock wise
    ctx.fillStyle=("#f00")
    ctx.fill();
    ctx.closePath();
    ctx.beginPath();
    ctx.arc(300,130,50,0,Math.PI,true);         // true for anti clock wise
    ctx.fillStyle=("#f00")
    ctx.fill();
    ctx.closePath();          
   
</script>	
</body>
</html>