Put an image on the Canvas

To draw an image on a canvas, we use the drawImage(image,x,y) method

HTML5 Canvas for beginners

The canvas element is used to draw graphics, on the fly, on a web page. It is only a container for graphics. We must use a script to actually draw the graphics.

***Internet Explorer 8 and earlier versions do not support the canvas element.

How can we create the canvas element

In order to create a canvas element, use the following markup:


As you can see above, I used an id attribute in order to referrence it later using javascript.If you want to style your canvas you can use the style attribute.

 
How can we draw onto the canvas using javascript 

As I mentioned earlier, after we create the canvas, we use javascript in order to draw something onto it. For example if we want to draw a red rectangle we use following markup, inside a script javascript tag.

I will briefly explain the code. First we find the canvas element with the id attribute, and then we call its getContext() method, passing the string "2d" as an arguement.

***The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more. 

At last we set the red color and draw the rectangle.

Read more examples

*** For more examples visit http://www.w3schools.com/html5/html5_canvas.asp

HTML5 new features

My first question, when started learning HTML5, was "What are the new features of this new version of HTML"? What new things can I do with HTML5, or how easier can I do some things I used to, while using HTML?

So, in this quick post, we will see the new interresting features in HTML5.

• The canvas element for 2D drawing
• New content-specific elements, like article, section, header, footer
• The video and audio elements for media playback
• Support for local storage
• New form controls, like calendar, date, time, email, url, search

In the following posts, I will explain each feature seperately in more detail.