HTML5 Graphics Tutorial - HTML5 Graphics Reference

HTML5 Graphics Tutorial: Learn HTML5 Graphics basic concept, Different Type of HTML5 Graphics, HTML5 Graphics Reference Guide, Know what are HTML5 Graphics, HTML5 Graphics Examples. In this page to learn the HTML5 Graphics definition, the Purpose of using HTML5 Graphics, and how to use HTML5 Graphics on a web page with examples. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.

What is HTML5 Graphics?

HTML5 Graphics: The HTML <canvas> element is used to draw graphics on a web page.

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>

What is 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>

What is 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>

Web Design Reference Guide Android App for Website Developers

Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.

Also Related to This Page

Facebook0 Tweet0 Pin0

HTML5 Graphics Tutorial – HTML5 Graphics Reference