HTML5 Graphics Tutorial and HTML5 Graphics Reference

Published on: September 9, 2014   Last Updated on : June 7, 2018   Posted By : WebDesignReference

Google Maps

Google Maps: Google Maps API allows to display maps on a web page.

Example : Google Maps in HTML

<!DOCTYPE html>
<html>
<head>
<title> Google Maps in HTML </title>
</head>
<body>
<script>
	function myMap() {
	var mapProp= {
		center:new google.maps.LatLng(50.508742,-0.110850),
		zoom:5,
	};
	var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
	}
	
</script>
<script src=”https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap”> </script>
<div class=”googleMap” style=”width:100%;height:300px;”> Your map display here. </div>
</body>
</html>
 

SVG

SVG stands for Scalable Vector Graphics. SVG defines vector-based graphics in XML format.

The HTML <svg> element allows you to display a vector based graphics in HTML.

Example : SVG Graphics in HTML

<!DOCTYPE html>
<html>
<head>
<title> SVG Example </title>
</head>
<body>
<h1> SVG Example 1 </h1>
<svg width=”100″ height=”100″> <circle cx=”50″ cy=”50″ r=”40″ stroke=”blue” stroke-width=”4″ fill=”green”/> Sorry, your browser does not support inline SVG. </svg>
</body>
</html>
 

HTML Canvas

The HTML <canvas> element can be used draw graphics in HTML. The HTML <canvas> element is used to draw graphics, on the fly, using scripting. With the use of JavaScript to actually draw the graphics on a web page. Canvas element has several methods for drawing paths, boxes, circles, text, and adding images on a web page.

Example : Canvas Graphics in HTML

<!DOCTYPE html>
<html>
<head>
<title> Canvas Example </title>
</head>
<body>
<h1> Canvas Example 1 </h1>
<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #333;”> Your browser does not support the HTML5 canvas tag. </canvas>
<script>
		var c = document.getElementById("myCanvas");
		var ctx = c.getContext("2d");

		// Create gradient
		var grd = ctx.createLinearGradient(0,0,200,0);
		grd.addColorStop(0,"blue");
		grd.addColorStop(1,"green");

		// Fill with gradient
		ctx.fillStyle = grd;
		ctx.fillRect(10,10,150,80);	
	
</script>
</body>
</html>

Also Related to HTML5

 

Leave a Reply