Canvas

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

Unlike SVG, Canvas is bitmap, that means zooming a webpage can pixlate canvas shape.

A <canvas> element does not have any content inside, and no border. Default width if canvas is 300 and height is 150. However we can change width and heigth of canvas using width and height attributes or css.


Create Canvas.

Canvas is build in a webpage using <canvas> tag. Canvas is pair element thus needs closing. This will create a canvas with width 300 and height 150.


<style>
    #mycanvas{ border:1px solid gray;}
</style>

<canvas id="mycanvas"></canvas>
			

How Canvas look on browser


Canvas Javascript

As we have created Canvas element, lets start adding some javascript to build content inside canvas.


<style>
    #mycanvas{ border:1px solid gray;}
</style>
    
<canvas id="mycanvas"></canvas>
		
<script>
    var c=document.querySelector('#mycanvas');
    var ctx=c.getContext("2d");		
</script>			

Canvas Line

Lets draw a line in HTML5 Canvas Element. To build a line or line segment, we need two points in canvas.


<canvas id="mycanvas"></canvas>

<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>		

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>