HTML5 Canvas Tutorial

April 23, 2014

Canvas is HTML5 element using which we can draw graphics and chart on web page by multiple canvas tool. Canvas is used to draw graphs or to make photo composition or for simple animations in combination of JavaScript. A canvas is a rectangular area on an HTML page that draws many shapes like boxes, circle, text, images, line, gradients etc. Canvas element does not support older browser, but supported in recent versions of all browsers like Internet Explorer 9+, Firefox, Opera, Chrome, and Safari. The default size of canvas area is 300px * 150px. Canvas size can be changed by CSS and JavaScript. By default canvas has no border and no content. In HTML web page we can use one or more canvas area to draw graphics. All draws of circle and other graphics should be inside canvas area.

<canvas id="myCanvasArea" width="300" height="150">

Canvas area is customized by CSS attribute and by using JavaScript. Canvas is two dimensional grid. The upper-left corner of the canvas has coordinate (0,0). Every canvas has a drawing context. A <canvas> element can accessed by document.getElementById() or any other method you like getContext().Html5 canvas is 2D Context, The 2D Context provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface.

1. How to draw Text in Canvas

HTML5 Canvas is used to draw Text in multiple format. HTML5 canvas can control font, color, size horizontal alignment, vertical alignment. fillText() method sets the font style and property in canvas area. Find the Example.

<!DOCTYPE html>
<html>
<body>
<canvas id="concrete" width="300" height="100" style="border:1px solid" ></canvas>
<script>
var c=document.getElementById("concrete");
var ctx=c.getContext("2d");
ctx.font=" italic  30px Arial";
ctx.fillStyle = "Red";
ctx.fillText("Concretepage.com",10,50);
</script>
</body>
</html>

Output will look as below.

2. How to Draw Circle in Canvas

We can draw Circle with HTML5 canvas by arc() method. This method takes five parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. Find the example.

<!DOCTYPE HTML>
<html>
  <head>
  </head>
  <body>
    <canvas id="concrete" width="300" height="200"></canvas>
    <script>
      var canvas = document.getElementById('concrete');
      var context = canvas.getContext('2d');
      var centerX = canvas.width / 2;
      var centerY = canvas.height / 2;
      var radius = 70;
      context.beginPath();
      context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
      context.fillStyle = 'red';
      context.fill();
      context.lineWidth = 2;
      context.strokeStyle = '#003300';
      context.stroke();
    </script>
  </body></html>

Find the output.

3. How to draw Path in Canvas

To create a path with HTML5 Canvas, we can connect multiple subpaths. We can use the lineTo() method to draw straight lines on a canvas.
moveTo(x,y): defines the starting point of the line in canvas area.
lineTo(x,y): defines the ending point of the line in canvas area.
Find the code how to use.

<!DOCTYPE html>
<html>
<body>
<canvas id="concrete" width="200" height="100" style="border:1px solid #d3d3d3;">
</canvas>
<script>
var c=document.getElementById("concrete");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(500,300);
ctx.strokeStyle = 'blue';
ctx.stroke();
</script>
</body>
</html>

The starting point position is (0,0), and ending point position is (500,300). Then use the stroke() method to actually draw the line. See the output.

4. How to draw Gradients in Canvas

HTML5 canvas create gradient image to use one are more color, we can fill circles, rectangle and lines. There are two different types of gradients.

A. createLinearGradient(x,y,x1,y1)

To create a linear gradient with HTML5 Canvas, we can use the createLinearGradient() method. Once we have created our gradient, we can insert colors using the addColorStop property. Find the example.

<!DOCTYPE html>
<html>
<body>
<canvas id="concrete" width="200" height="100"></canvas>
<script>
var c=document.getElementById("concrete");
var ctx=c.getContext("2d");
var grdImg=ctx.createLinearGradient(0,0,250,0);
grdImg.addColorStop(0,"blue");
grdImg.addColorStop(1,"white");
ctx.fillStyle=grdImg;
ctx.fillRect(20,10,150,80);
</script>
</body>
</html>

The output will look as below.

B. createRadialGradient(x,y,r,x1,y1,r1)

HTML5 Canvas creates a radial gradient with combination of multiple color, we can use createRadialGradient() method. Radial gradients are defined with two imaginary circles - one starting circle and second ending circle, in which the gradient starts with the start circle and moves towards the end circle. Example is given below.

<!DOCTYPE html>
<html>
<body>
<canvas id="concrete" width="200" height="100"></canvas>
<script>
var c=document.getElementById("concrete");
var RadialGradient=c.getContext("2d");
var grd=RadialGradient.createRadialGradient(75,80,5,100,60,100);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"white");
RadialGradient.fillStyle=grd;
RadialGradient.fillRect(10,10,150,80);
</script>
</body>
</html>

Output will look as below.

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5