Canvas
HTML5 Canvas ( <canvas>) is a bitmap canvas used to build 2D shapes, drawings, Shapes like lines/ rectangle/circle, animations, and games using Javascript. canvas is just a inline-block element in our webpage where we can use JavaScript to draw whatever we want.
Unlike SVG, Canvas is bitmap, that means zooming a webpage can pixelate canvas shape.
A <canvas> element does not have any content inside, and no border. Default width of canvas is 300 and height is 150. However we can change width and height of canvas using width and height attributes or css.
Canvas Element.
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>
Canvas getContext
As we have created Canvas element, lets start adding some JavaScript to build content inside canvas. To do this use getContext("2d") function of Canvas Element.
<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>
Canvas Rectangle
Lets draw a rectangle in canvas, use four lines and last line should match beginning point. After a shape is done, use fill() to fill color in canvas. We can also give stroke to rectangle.
<canvas id="mycanvas"></canvas>
<script>
var c=document.querySelector('#mycanvas');
var ctx=c.getContext("2d");
ctx.moveTo(20,20); // move pointer to x=20 and y=20;
ctx.lineTo(20,180); // draw line to x=20 and y=180;
ctx.lineTo(280,180); // draw line to x=280 and y=180;
ctx.lineTo(20,20); // draw line to x=20 and y=20;
ctx.stroke(); // draw outline
ctx.fillStyle="#cfc"; // fill color selected
ctx.fill(); // fill color in canvas
</script>
Letter box using Canvas
Lets start creating a Letter box using HTML5 canvas. Here we will draw one rectangle and one triangle on it.
<canvas id="mycanvas" width="400" height="300"></canvas>
<script>
var c=document.querySelector('#mycanvas');
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(300,20);
ctx.lineTo(300,240);
ctx.lineTo(20,240);
ctx.lineTo(20,20);
ctx.fillStyle="#aaa"
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(160,120);
ctx.lineTo(300,20);
ctx.fillStyle="#888";
ctx.fill();
ctx.closePath();
</script>
Fill Rectangle in Canvas
How to fill a rectangle in HTML5 canvas.
<canvas id="mycanvas" width="400" height="300">
</canvas>
<script>
var c=document.querySelector('#mycanvas');
var ctx=c.getContext("2d");
ctx.fillRect(0,0,400,300)
</script>
Fill Gradient in canvas
To fill gradient in canvas, we ned to create gradient in canvas.
<canvas id="mycanvas" width="400" height="300">
</canvas>
<script>
var c=document.querySelector('#mycanvas');
var ctx=c.getContext("2d");
var grd=ctx.createLinearGradient(0,0,320,240);
grd.addColorStop(0,"red");
grd.addColorStop(0.5,"white");
grd.addColorStop(1,"blue");
ctx.fillStyle=grd;
ctx.fillRect(0,0,400,300)
</script>
Create Circle in Canvas
To create circle in canvas, we use arc() function with six parameters. Here are these parameters name and explanation.
arc() in canvas
- x ( in number)
- y ( in number)
- r ( radius in number)
- start angle ( in number)
- end angle ( in number)
- boolean for anticlock direction ( in number)
- start and end angle should be in between 0 to 2π. To write π, use
Math.PI. - boolean anticlock is option. Default true means clockwise.
<canvas id="mycanvas" width="400" height="300">
</canvas>
<script>
var c=document.querySelector('#mycanvas');
var ctx=c.getContext("2d");
ctx.arc(200,150,50,0,2*Math.PI);
ctx.fill()
</script>
Fill Radial Gradient in circle
To fill radial gradient, create a radial gradient by using createRadialGradient(). This function is having 6 parameters.
<canvas id="mycanvas" width="400" height="300">
</canvas>
<script>
var c=document.querySelector('#mycanvas');
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(160,130,100,0,2*Math.PI);
var grd1=x5.createRadialGradient(160,130,10,160,130,100);
grd1.addColorStop(0,"red");
grd1.addColorStop(0.8,"white");
grd1.addColorStop(1,"blue");
ctx.fillStyle=grd1;
ctx.fill();
ctx.stroke()
ctx.closePath();
</script>
Create a leaf
<canvas id="mycanvas" width="400" height="300">
</canvas>
<script>
var c=document.querySelector('#mycanvas');
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(200,150,50,0,0.5*Math.PI);
ctx.arc(250,200,50,Math.PI, 1.5*Math.PI);
ctx.fillStyle=("#f00")
ctx.fill();
ctx.stroke()
ctx.closePath();
</script>
</body>
</html>