Canvas Introduction + Tutorial

Canvas Introduction

The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics. A canvas is a rectangular area and it has several methods for drawing paths, boxes, circles, characters, and adding images.

The <canvas> element is a new HTML5 markup element that allows drawing in a web page without using Document Object Model (DOM) APIs or plug-ins. Although somewhat new, the <canvas> element has been adopted by most modern browsers.

Instead of creating graphics on-screen using HTML elements and other markup with CSS styling, Canvas allows the drawing of graphics directly using JavaScript commands like drawRect, fill, and drawImage. In addition, it is possible to manipulate pixels directly to modify images and create special effects. Although Canvas is currently a 2D drawing API, 3D support is planned for future releases.

Syntax

<canvas id="id"
  width="width"
  height="height">
  fallback_content
</canvas>

Note:

The <canvas> element has no drawing abilities of its own
All drawing must be done inside JavaScript. By default, the <canvas> element has no border and no content
The optional fallback_content is rendered by browsers that do not support the canvas tag
Allows drawing of graphics directly without having to resort to <div> or CSS tricks
Canvas is a web standard, supported by most browsers, with compatible implementations
The canvas is a two-dimensional grid.
More easily hardware accelerated resulting in fast animations
The upper-left corner of the canvas has coordinate (0,0)
In the future, Canvas will support contexts other than ’2d’, such as the pending WebGL spec for 3D graphics.

Tip: You can have more than one <canvas> elements on one document.

Tip: Although using the <canvas> element is straightforward, it is helpful to have a basic understanding of HTML and JavaScript.

Attributes

Attribute	Value	Description
width	pixels	width pixels Specifies the width of the canvas (default = 300)
height	pixels	height pixels Specifies the height of the canvas area (default = 150)

Standard Attributes

This (<canvas>) tag supports the HTML5 Standard Attributes.

Event Attributes

This (<canvas>) tag supports the HTML5 Event Attributes.

The canvas element must have an id (mycanvas in this case) so that a reference to the canvas can be obtained. In addition, the canvas element must specify a width and height.

To get the drawing context, get a reference to the Canvas element (using getElementById) and call getContext(’2d’).

With the drawing context, drawing is performed with commands like fillRect and draw.

Testing for Support

Although most modern browsers support Canvas, some of the older versions do not. Therefore, it is a good practice to test for Canvas support. There are two mechanisms to test for Canvas support,

Canvas Fallback

To be safe, provide alternative content inside the canvas element as shown in the following example:

<canvas id="clock" width="100" height="100">
   The current time is: 03:51 PM
</canvas>

Browsers which support <canvas> will ignore the fallback content and render the canvas normally. Otherwise, browsers which don’t support <canvas> will render the fallback content within the element.

Testing in JavaScript

To check for Canvas support in JavaScript, test for the getContext() method. The following code shows how to do this:

var canvas = document.getElementById(’mycanvas’);
if (canvas.getContext){
  // canvas supported code here
} else {
  // canvas not supported code here
}

Differences from SVG

While both Canvas and SVG can be used to create graphics, they are very different and each has their own purpose. Canvas is an immediate mode drawing surface whereas SVG is a retained mode scene graph. This means that Canvas is a lower level API than SVG, giving the developer more control and speed at the cost of more code and complexity. SVG is a higher level API, which lets the developer quickly draw shapes, but at the cost of fewer features and reduced speed. In addition, SVG is a resolution-independent vector API, while canvas is a resolution-dependent bitmap API.

Currently, Canvas has better browser support and can be used to draw vectors like SVG.

Here are some examples.

Example 1 Draw Rectangular

<canvas id="Canvas01" width="250" height="125"
style="border:3px solid blue;">
</canvas>
<script>
  var cv = document.getElementById("Canvas01");
  var myrec01 = cv.getContext("2d");
  myrec01.fillStyle = "red";
  myrec01.fillRect(10,10,160,80);
</script>

Try it now >>

The Following is the result of the above example:

Example 2 Draw Line

To draw straight lines on a canvas, we will use two methods:

moveTo(x,y) defines the starting point of the line and
lineTo(x,y) defines the ending point of the line. lineTo will connect to the previous straight line.

Finally, to make the line visible, we must apply one of the "ink" methods like stroke()

<canvas id="Canvas02" width="250" height="150"
style="border:3px solid blue;">
</canvas>

<script>
var cv = document.getElementById("Canvas02");
var myrec01= cv.getContext("2d");
myrec01.moveTo(0,150);
myrec01.lineTo(125,0);
myrec01.lineTo(250,150);
myrec01.stroke();
</script>

Try it now >>

The Following is the result of the above example:

Example 3 Draw a Circle and Arc

To draw straight lines on a canvas, we will use two methods:

moveTo(x,y) defines the starting point of the line and
lineTo(x,y) defines the ending point of the line. lineTo will connect to the previous straight line.

Finally, to make the line visible, we must apply one of the "ink" methods like stroke()

<canvas id="Canvas03" width="220" height="220" style="border:3px solid blue;"></canvas>
    <script>
      var canvas = document.getElementById("Canvas03");
      var context = canvas.getContext("2d");
      var x = canvas.width / 2;
      var y = canvas.height / 2;
      var radius = 70;
      var startAngle = 1.2 * Math.PI;
      var endAngle = 1.8 * Math.PI;
      var counterClockwise = false;

      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;

      context.strokeStyle = "red";
      context.stroke();

      context.lineWidth = 10;
      context.strokeStyle = "green";
      context.beginPath();
      context.arc(x,y,40,0,2*Math.PI);
      context.stroke();
    </script>

Try it now >>

The Following is the result of the above example:

Example 4 Draw Text

To draw text on a canvas, the most important property and methods are:

font - defines the font properties for text
fillText(text,x,y) - Draws "filled" text on the canvas
strokeStyle - property of the canvas context to a color string, hex value, or RGB value
strokeText(text,x,y) - Draws text on the canvas (no fill)

<canvas id="Canvas04" width="600" height="180" style="border:3px solid blue;"></canvas>
    <script>
      var canvas = document.getElementById("Canvas04");
      var context = canvas.getContext("2d");

      context.font = "40pt Tahoma";
      context.lineWidth = 3;
      // stroke color
      context.strokeStyle = "red";
      context.strokeText("SOLOLEARN", 60, 70);
      //filled text
      context.font = "60px Arial";
      context.fillText("SOLOLEARN",60,140);
    </script>

Try it now>>

The Following is the result of the above example:

Example 5 Gradient

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.

There are two types of gradients:

createLinearGradient(x,y,x1,y1) - To create a linear gradient with HTML5 Canvas
createRadialGradient(x,y,r,x1,y1,r1) - To create a radial/circulargradient with HTML5 Canvas

Linear gradients are defined by an imaginary line which defines the direction of the gradient. Once we’ve created our gradient, we can insert colors using the addColorStop property.

    <canvas id="Canvas05" width="200" height="100"></canvas>
    <script>
      var canvas = document.getElementById("Canvas05");
      var context = canvas.getContext("2d");
      context.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
      var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
      // light magenta
      grd.addColorStop(0, "#FDC2FD");   
      // dark magenta
      grd.addColorStop(1, "#BF3EBD");
      context.fillStyle = grd;
      context.fill();
    </script>

    <canvas id="Canvas06" width="200" height="100"></canvas>
    <script>
     var canvas= document.getElementById("Canvas06");
     var context= canvas.getContext("2d");
     // Create gradient
    var grd = context.createRadialGradient(70,40,5,80,50,90);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");

   // Fill with gradient
   context.fillStyle = grd;
   context.fillRect(8,8,130,70);
</script>

Try it now>>

The Following is the result of the above example:

Try running code yourself