What is a HTML Canvas ?
HTML <canvas> element is used to draw graphics via scripting usually Javascript.
HTML <canvas> was originally introduced by Apple for the Mac OS dashboard widgets and to power graphics in the Safari web browser.
Later it was adopted by the other browsers like Firefox, Google Chrome and Opera.
Now canvas became a part of the new HTML5 specification for next generation web technologies.
Why HTML Canvas is used ?
The main purpose of using <canvas> element is to draw 2D graphics.
HTML <canvas> element is used to draw paths, boxes, circles, text, and adding images in the webpages.
HTML <canvas> element is also used for animation, game graphics, data visualisation, photo manipulation, and real-time video processing.
How HTML <canvas> element works ?
HTML <canvas> element is a container which is used to draw graphics with the help of Javascript.
HTML <canvas> element have several methods to draw paths, boxes, circles, text, and adding images.
Default size of the canvas is 300 pixels × 150 pixels (width × height).
We can modify the default width and height by using the CSS height and width property whereas the border can be applied using the CSS border property.
<canvas> element, by default have no border and no content.
Syntax :
<canvas id = "myCanvasId" width ="300" height ="150"> </canvas>
How to draw using <canvas> element with Javascript ?
1. Find out the canvas element using javascript.
This can be done by getting the canvas element by using Javascript.
var canvas = document.getElementById("myCanvasId");
2. Creating a drawing object.
Next we have to create a drawing object for the canvas.
This can be done using getContext() method.
getContext() is a HTML built-in object contains its own properties and methods.
var context = canvas.getContext("2d");
3. Drawing on canvas.
We can draw on the canvas, by using fill style property.
We can specify colors, gradient or pattern in fill style property to apply colors on the canvas.
ctx.fillStyle = "#E91135";
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
Canvas implementation techniques
<canvas> element is used in many ways some of them are listed below,
1. Drawing Lines
2. Drawing square box
3. Drawing Rectangular box
4. Drawing circle
5. Drawing text
1. Drawing Lines
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="300" height="150" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.beginPath();
ele.moveTo(0, 0);
ele.lineTo(400, 100);
ele.stroke();
</script>
</body>
</html>
Output :
2. Drawing square box
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.fillStyle = "green";
ele.fillRect(50, 50, 200, 200);
</script>
</body>
</html>
Output :
3. Drawing Rectangular box
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.fillStyle = "blue";
ele.fillRect(50, 50, 250, 100);
</script>
</body>
</html>
Output :
4. Drawing circle
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.beginPath();
ele.arc(150,150,100,0,2*Math.PI);
ele.stroke();
</script>
</body>
</html>
Output :
HTML coding for a website !!!
Click to Learn More about – HTML Tutorial for beginners
5. Drawing text
Example :
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Canvas</title>
</head>
<body>
<canvas id="myCanvasId" width="350" height="350" style="border:1px solid red;">
<script>
var canvas = document.getElementById("myCanvasId");
var ele = canvas.getContext("2d");
ele.font = "20px LatoBold";
ele.fillText("Welcome to CSTechbook",50,150);
</script>
</body>
</html>
Output :
If some one needs to be updated with newest technologies therefore he must be pay a visit this web site and be up to date
every day.
Thanks a lot for your love and support.
If the tutorial is good please share it to your friends.
Thanks.