HTML5 form tags and canvas tag

HTML5 form tags and canvas tag

In HTML5 the user can avail the feature of canvas tag, that used to draw graphics and all.

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

Form Tags

<datalist> Specifies a list of pre-defined options for input controls

<keygen> Defines a key-pair generator field (for forms)

<output> Defines the result of a calculation

7 posts / 0 new
Last post
For more complete information about compiler optimizations, see our Optimization Notice.

some examples please !

wil try asap

yes we need some examples to be more clear :) 

A canvas is a rectangular area on an HTML page

normally the <canvas> element has no border and no content.

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

Always specify an id attribute to bepointed to in a script), and a width and height attribute to define the size of the canvas.

to have a border around your canvas, use the style attribute:

Example <canvas id="pon_canvas" width="200" height="100"
style="border:1px solid #000000;">

java code and canvas for drawing inside canvas

var c=document.getElementById("pon_canvas");
var ctx=c.getContext("2d");

let me explain this

var c=document.getElementById("pon_canvas");

Then, call its getContext() method (you must pass the string "2d" to the getContext() method):

var ctx=c.getContext("2d");

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

The next two lines draw a red rectangle:


The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).

The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

Hi Ponram thid tutorial is very nice:

JudLup Luna

Leave a Comment

Please sign in to add a comment. Not a member? Join today