HTML Canvas Tutorial
A basic canvas element example is shown below.
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;">
</canvas>
<script>
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 );
</script>
