Canvas means drawing images on the browser pages. The Canvas Tag in HTML is one such element that provides HTML with a bitmap surface, like a blank canvas consisting map of pixels, which might contain more than two colors, to work with. The
Initially, HTML does not support canvas, but later HTML5 introduced this canvas feature. This
Real-Time Example:Instead of writing standalone code for implementing graphics for each and every shape, it will become an overload on the processor. So to overcome this kind of situations, developers come up with a canvas tag in HTML. Less code can give us an exact graphic animation shape.
Canvas feature in HTML is working by applying
<canvas> //specify some properties inside canvas tag because different shape have different properties like width="" ,height="" , style=”” //code </canvas> <script> //script code for animations and graphics </script>
Here is the example:
A circle inside rectangle with Canvas Example:
Code:
<!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: green; text-align:center; } p { color:brown; border: solid 2px blue; font-size: 25px; } </style> </head> <body> <h1> Circle Shape inside Rectangle Shape </h1> <canvas id="rectangleCircle" width="300" height="200" style="border:2px solid red;"> </canvas> <script> var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape creatingCircle.beginPath();//circle shape begin creatingCircle.arc(150,100,80,4,4*Math.PI);//circle x, y and size of the circle creatingCircle.stroke();//stroke of the circle </script> </body> </html>
Output:
Text inside the circle shape with Canvas Example:
Code:
/strong><!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: red; text-align:center; } p { color:green; border: solid 2px maroon; font-size: 25px; } </style> </head> <body> <h1> Text Inside the Circle Shape </h1> <canvas id="rectangleCircle" width="300" height="200" style="border:2px solid navy;"> </canvas> <script> var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape creatingCircle.beginPath();//circle shape begin creatingCircle.arc(150,100,100,4,4*Math.PI);//circle x, y and size of the circle creatingCircle.stroke();//stroke of the circle creatingCircle.font = "30px Arial";//Creating a font creatingCircle.strokeText("EDUCBA",100,90);// Creating text inside the circle </script> </body> </html>
Output:
Draw the line with Canvas Example:
Code:
<!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: blue; text-align:center; } p { color:red; border: solid 2px orange; font-size: 25px; } </style> </head> <body> <h1> Draw the Line with Canvas </h1> <canvas id="lineID" width="400" height="400" style="border:2px solid orange;"> </canvas> <script> var line = document.getElementById("lineID");// with id drawing line shape with script var lineCreate = line.getContext("2d");//get the line type from 2d shape lineCreate.moveTo(0,0);//move the line lineCreate.lineTo(400,400);//Where to where line has to move lineCreate.stroke();//line stroke </script> </body> </html>
Output:
Triangle shape with Canvas Example:
Code:
<!DOCTYPE html> <html> <head> <title> Canvas in HTM5 </title> <!--CSS Styles--> <style> h1 { color: fuchsia; text-align:center; } p { color:blue; border: solid 2px skyblue; font-size: 25px; } </style> </head> <body> <h1> Triangle Shape with Canvas </h1> <canvas id="triangleID" width="300" height="300" style="border:2px solid skyblue;"> </canvas> <script> var canvas = document.getElementById('triangleID');// with id drawing traingles shape with script if (canvas.getContext) { var traingle = canvas.getContext('2d');//get the traingels type from 2d shape //Creating the traingle traingle.beginPath(); traingle.moveTo(25,25); traingle.lineTo(105,25); traingle.lineTo(25,105); traingle.fill(); // Triangle can be stroked with below fuctions traingle.beginPath(); traingle.moveTo(125,125); traingle.lineTo(125,45); traingle.lineTo(45,125); traingle.closePath(); traingle.stroke(); } else { alert('Your browser does ot support this feature');//alert the user document.write('Your browser does ot support this feature');//display the output } </script> </body> </html>
Output:
The canvas tag is introduced in the HTML5 version. Both canvas and JavaScript code gives you accurate shapes to draw with canvas tag. We can draw a circle, rectangle, line, triangle shapes etc.
The above is the detailed content of Canvas Tag in HTML. For more information, please follow other related articles on the PHP Chinese website!