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.<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.<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.
<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
- HTML5 Attribute Tutorial and HTML5 Attribute Reference
- HTML5 Doctype Tutorial and HTML5 Doctype Reference
- HTML5 Examples – HTML5 Tutorial Examples, HTML5 Reference Examples
- HTML5 Graphics Tutorial and HTML5 Graphics Reference
- HTML5 Media Tutorial and HTML5 Media Reference
- HTML5 Tags Tutorial and HTML5 Tags Reference