HTML Canvas

The HTML5 <canvas> element can be used to draw graphics on a web page.The HTML 5 <canvas> tag is used to draw graphics using a scripting language like JavaScript.

The canvas element was originally introduced and developed by Apple for the Mac OS dashboard widgets and to power graphics in the Safari web browser.

create a HTML canvas:

A canvas is a rectangle like an area on an HTML page. It is specified with the canvas element. By default, the <canvas> element has no border and no content, it is like a container.

Syntax:

<canvas id = "mycanvas" width ="200" height ="100"> </canvas>

Example:

<!DOCTYPE>
<html> 
<body> 
<h2>canvas </h2>
<canvas id="myCanvas" width="300" height="200" style="border:2px solid red;">  
</canvas>  
</body>
</html>

OUTPUT:

HTML Canvas

Browser Support:

Fully supports the <canvas> element.

HTML Canvas

Canvas Tag with JavaScript:

After creating the rectangular canvas area, you must add JavaScript.

Example:

<!DOCTYPE html>
<html>
<body>
<h2>canvas </h2>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid red;">
Your browser does not support the HTML canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>

</body>
</html>

OUTPUT:

HTML Canvas

Draw a Circle:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Draw a Circle</h2>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid yellow;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>

</body>
</html>

OUTPUT:

HTML Canvas

Draw a Text:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Draw a Text</h2>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid pink;">
</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>

</body>
</html>

OUTPUT:

HTML Canvas

Stroke Text:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Stroke Text</h2>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid red;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>

</body>
</html>

OUTPUT:

HTML Canvas

Draw Linear Gradient:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Draw Linear Gradient</h2>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

OUTPUT:

HTML Canvas

Draw Circular Gradient:

Example:

<!DOCTYPE html>
<html>
<body>
<h2>Draw Circular Gradient</h2>
<canvas id="myCanvas" width="200" height="100" style="border:2px solid #d3d3d3;"></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,"yellow");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

OUTPUT:

HTML Canvas