Introduction of HTML5 Canvas element
In this article I have described about the canvas element in HTML5.
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