HTML5 Canvas Tag, TutorialsPoint, HTML5 Canvas Tag Tutorial

HTML5 Canvas

Html5 <canvas> component is utilized to draw representation, on the fly, by means of scripting (normally Javascript). It can be used for rendering graphs, game graphics, or other visual images.

To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method. Canvas has a few strategies for drawing ways, boxes, rings, content, and including pictures.

Example :

<!DOCTYPE html>
 
<html>
 
    <head>
    <title>Canvas Tag</title>
    </head>
    
    <body>
 
<canvas id="canvasuses" width="250" height="125">
<p>Your browser does not support the HTML5 canvas element.</p>
</canvas>
 
<script type="text/javascript">
 
var c=document.getElementById("canvasuses");
var canvOK=1;
try {c.getContext("2d");}
catch (er) {canvOK=0;}
if (canvOK==1)
    {
    var ctx=c.getContext("2d");
    var grd=ctx.createLinearGradient(0,0,200,0);
    grd.addColorStop(0,"green");
    grd.addColorStop(1,"white");
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,80);
        }
 
    </script>
    </body>
    
</html>

Output :

Example : 2

	
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 Canvas Tag</title>
    </head>
    
    <body>
    
    <canvas id="myCanvas" width="250" height="100"></canvas>
    <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    // Create gradient
    var grd = ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    
    // Fill with gradient
    ctx.fillStyle = grd;
    ctx.fillRect(10,10,150,80);
    </script>
    </body>
    
</html>

Output :

HTML5 Tutorial