Discover HTML5 and CSS3 (JavaScript come too) - Part 4
The multimedia content is very important in web, you can use several plugins like Adobe Flash or Microsoft Silverlight to draw what you want, but these are proprietary components and the idea in HTML5 is to bring enough tools to the developer to be able to do it native in the browser. In this post we are going to talk about the Canvas element. This new tag provided by HTML5 allows you to add a region in your website to draw whatever you want. We need to add the canvas tag inside the <body> part and define the dimensions an id because we will use JS to. We can write a text between the open and close tags to show it when the browser can’t render our drawing. If you don't add the dimensions attributes then a canvas 300x150 will be created. Here an example:
Once we have declared the element in our html file we need to draw something using JS. Here I enlcose some code to draw a line inside the canvas.
function draw() {
var canvas = document.getElementById("board");
if (canvas.getContext) {
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(10, 10);
context.lineTo(100, 100);
context.stroke();
}
}
window.onload = draw;
