HTML5 Canvas Tutorial - How do i work with HTML Canvas
Published October 25, 2021 Canvas element in the html5 allows us to render dynamic 2d shapes inside webpage using Javascript. In this Html canvas tutorial we will cover create different shapes with html canvas tag. The html <canvas> element tag is used to draw graphics.
We will cover
- HTML Canvas draw line
- HTML canvas rectangle
- HTML canvas draw paths
Let's create different canvas tutorial examples
Draw a HTML Canvas
<!DOCTYPE HTML>
<html>
<head>
<head>
<meta charset="UTF-8">
<title>Html5 Canvas Tutorial</title>
</head>
<style>
#canvas_id{border:1px solid blue;}
</style>
</head>
<body style="text-align:center;">
<h2> HTML5 Canvas Element</h2>
<canvas id="canvas_id" width="200" height="200"></canvas>
</body>
</html>
|
This will give below output
HTML5 Drawing Rectangles
To draw rectangle on the canvas has provided methods
fillRect(x,y,width,height): This canvas method will used to draw a rectangle with fill shape
strokeRect(x,y,width,height): This method will used to create outline rectangle
clearRect() : This canvas method will used to create transparent rectangle
In the above canvas methods x and y params are the position of the canvas from top-left position and width and height are the Canvas height and width respectively.
Canvas Example to Draw simple Rectangle
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 200px;
height:200px;
margin: 20px auto;border:1px solid blue;
}
</style>
<script type="text/javascript">
function drawRectangleShape(){
// Get the canvas element using the DOM
var canvas = document.getElementById('canvas_id');
// Check browser support canvas or not
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillStyle = "#FF0000";
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeStyle = "#228B22";
ctx.strokeRect(50,50,50,50);
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
HTML5
69
}
}
</script>
</head>
<body id="test" onload="drawRectangleShape();" style="padding:10px; text-align:center; color:#000;" >
<canvas id="canvas_id"></canvas>
</body>
</html>
|
Output:
Canvas Draw Paths:
|
fill() : This canvas method will used to Fills the current drawing (path)
stroke() : This canvas method will used to draws the path you have defined
beginPath() This canvas method will used to Begins a path, or resets the current path
moveTo() This canvas method will used to Moves the path to the specified point in the canvas, without creating a line
closePath() This canvas method will used to Creates a path from the current point back to the starting point
lineTo() This canvas method will used to Adds a new point and creates a line to that point from the last specified point in the canvas
clip() This canvas method will used to Clips a region of any shape and size from the original canvas
arc() This canvas method will used to Creates an arc/curve (used to create circles, or parts of circles)
arcTo() This canvas method will used to Creates an arc/curve between two tangents
isPointInPath() This canvas method will Returns true if the specified point is in the current path, otherwise false
|
Canvas path example to draw a shape
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('canvas_id');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.strokeStyle = "#FF0000";
ctx.beginPath();
ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
ctx.moveTo(110,75);
ctx.arc(75,75,35,0,Math.PI,false); // Mouth
ctx.moveTo(65,65);
ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye
ctx.moveTo(95,65);
ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye
ctx.stroke();
}
else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="canvas_id"></canvas>
</body>
</html>
|
output:
Canvas Draw Lines
|
lineCap() This canvas method used to Sets or returns the style of the end caps for a line
lineJoin() This canvas method used to Sets or returns the type of corner created, when two lines meet
lineWidth() This canvas method used to Sets or returns the current line width
miterLimit() This canvas method used to Sets or returns the maximum miter length
|
Example to draw lines on canvas
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
text-align:center;
height:100px;
margin: 20px auto;
}
</style>
<script type="text/javascript">
function drawShape(){
// get the canvas element using the DOM
var canvas = document.getElementById('canvas_id');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext){
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "#FF0000";
for (i=0;i<10;i++){
ctx.lineWidth = 1+i;
ctx.beginPath();
ctx.moveTo(5+i*14,5);
ctx.lineTo(5+i*14,140);
ctx.stroke();
}
}
else
{
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body onload="drawShape();">
<h2>HTML5 Canvas Tutorial to draw lines</h2>
<canvas id="canvas_id"></canvas>
</body>
</html>
|
Output:
Conclusion: In this HTML canvas tutorial we covered how to use html canvas tag to draw rectangle, lines and paths on canvas.
