Introduction of HTML5 Canvas element

In this article I have described about the canvas element in HTML5.
  • 1841

Introduction of canvas

  • The main aim of canvas and SVG is to create graphics (image/video) inside the browser using coordinate points.
  • It is used to create native interactivity and animation for web pages.
  • First time, the canvas element was introduced by Apple in 2004.
  • Basically canvas element are used to create graphics with the help of JavaScript.
  • The canvas element has some attributes like height and weight and methods and methods to draw character, boxes, path and other adding image.
  •  In canvas, when any graphics is drawn and if its position has changed, the entire scene need to redraw.
     

Basic way to use canvas in HTML5

We can use canvas element within the JavaScript simply as follows

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

NOTE

In above syntax canvas id - use to find canvas element within the JavaScript code.

Canvas element always use with JavaScript because canvas element has no drawing capability itself.

var rectangle = document.getElementById('rectangle');

    var context = rectangle.getContext('2d');

    context.fillStyle = 'red';

    context.fillRect(30, 30, 50, 50);

</script>

 

this code will print rectangle of red color.

Browser support

Following are some browsers which support the <canvas> element

  • Firefox
  • Opera
  • Chrome
  • Internet explorer 9
  • Safari

They all have 2D canvas context capability.

You may also want to read these related articles :

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2020 DotNetHeaven. All rights reserved.