HTML Tutorial - Canvas, Photo on canvas, draw graphics

Tutorials

Html

Topic

How can i draw graphics using HTML element?
How to make photo composition?

Explanation

Canvas:

It is used to draw some graphics into HTML pages with the help of javascript. Simple animations can be done by using this tag.

<canvas> tag is a new HTML element which can be used to draw graphics using scripting (usually JavaScript). For instance it can be used to draw graphs, make photo compositions or do simple (and not so simple) animations.

<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari. Gecko 1.8-based browsers, such as Firefox 1.5, also support this new element. This element is part of the Web Hypertext Application Technology Working Group(WhatWG)

Using the <canvas> element is not very difficult but you do need a basic understanding of HTML and JavaScript. This tag allows you to literally create a blank canvas that you can then "paint" onto using javascript.

Example code

<canvas id="test" width='100' height='100'>
// javascript: set up the canvas object for drawing
var canvas = document.getElementById("test");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,0);
context.lineTo(50,100);
context.stroke();