HTML Canvas

The HTML <canvas> tag (element) is used to draw graphics on a web page. To accomplish this, the <canvas> tag (element) must be used in conjunction with JavaScript. Common objects draw include paths, boxes, circles, text, and images.

A <canvas> is itself a rectangle wihtout borders. The following examples illustrates this (with a border.

Example: Canvas border

	<canvas id="theCanvas" width="300" height="300" style="border: 3px dashed blue;">

Run it now

Example: A Gradient Rectangle

	<canvas id="theCanvas" width="200" height="200;">

	var c = document.getElementById("theCanvas");
	var contx = c.getContext("2d");

	// Create gradient
	var grd = contx.createRadialGradient(95,50,5,90,60,120);

	// Fill gradient
	contx.fillStyle = grd;

Screenshot of above code:


Run it now