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;">
	   </canvas>
	

Run it now

Example: A Gradient Rectangle

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

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

	// Create gradient
	var grd = contx.createRadialGradient(95,50,5,90,60,120);
	grd.addColorStop(0,"green");
	grd.addColorStop(1,"white");

	// Fill gradient
	contx.fillStyle = grd;
	contx.fillRect(5,5,175,100);
	</script>
	

Screenshot of above code:

Run it now