HTML Canvas Tutorial

A basic canvas element example is shown below.

Canvas is not supported in your browser.

The HTML5 Canvas element is used to draw graphics.

The Canvas element doesn't have any inbuilt drawing functionality, it just provides a container where we can draw.

Drawing in HTML5 Canvas element is done using scripts like Javascript, the one shown above is a good example.

Canvas getContext() Method

The Methods and Properties required to draw in Canvas element is provided by getContext() Method.

The code of the example shown above is provided below for reference.

<canvas id='canvas' style="width:70%; height:150px; border:solid;">



var canvas = document.getElementById('canvas'),
context = canvas.getContext('2d');
context.font = '30pt Arial';
context.fillStyle = 'cornflowerblue';
context.strokeStyle = 'blue';
context.fillText("Hello Canvas", canvas.width/2 - 120, canvas.height/2 + 15);
context.strokeText("Hello Canvas", canvas.width/2 - 120, canvas.height/2 + 15 );


Next Lesson > HTML5 Videos & Audio