Draw Rectangle: HTML5 Canvas

This video tutorial illustrates the drawing of rectangle with styling.

Tutorial Includes:
Drawing rectangle.
Specifying x-axis and y-axis for drawing rectangle.
Specifying width and height for drawing rectangle.
Filling the border(strokeStyle) with color.
Filling the body(fillStyle) of rectangle with color.
Specifying the border width(lineWidth). etc

HTML5-canvas-rectangle-xaxis-yaxis


HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< !DOCTYPE HTML>
<html>
<head>
<title>Canvas: HTML5</title>
<meta charset="utf-8"/>
<link href="myStyle.css" rel="stylesheet" />
<script src="myScript.js"></script>
</head>
<body>
 <canvas id="myCanvas" width="200" height="200">
  Upgrade Browser
 </canvas>
</body>
</html>

Here we’ve attached a stylesheet and a script file.
It also has a canvas element with an id of myCanvas, with 200px width and height.

CSS file
myStyle.css

1
2
3
canvas {
border: 2px dotted black;
}

We are assigning a 2px wide black dotted border to the canvas element.

JavaScript file
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.onload = canvas;
 
function canvas()
{
var myCanvas = document.getElementById("myCanvas");
 
if( myCanvas && myCanvas.getContext("2d") ) 
{
var context = myCanvas.getContext("2d");
context.lineWidth   = 2;
context.strokeStyle = "red";
context.strokeRect(10, 10, 100, 100);
 
context.fillStyle = "blue";
context.fillRect(10, 10, 100, 100);
}
}

Related Read: Canvas Basics: HTML5

Once the index.html file loads, it calls a method called canvas.

Validation
Inside canvas method, we check if the canvas element is actually present on the webpage. If present, we check if the browser actually supports context object.

If both of them are present, then we make use of the API provided by context object and draw the rectangle and assign some styling to it.

Defaults
By default, lineWidth has 1px. In our example we’re setting it to 2px.
By default, strokeStyle and fillStyle has black color. In our example, we’re setting it to red and blue respectively.

Result
Canvas element has some margin by default. And the top left corner of canvas is considered x-axis = 0 and y-axis = 0.
In our example, we are placing our rectangle at 10px x-axis and 10px y-axis, with 100px width and height.

With all these, we get a 100px wide and 100px tall, blue rectangle with a red border.

Draw Rectangle: HTML5 Canvas


[youtube https://www.youtube.com/watch?v=i5aZGbbFwDI]

YouTube Link: https://www.youtube.com/watch?v=i5aZGbbFwDI [Watch the Video In Full Screen.]



Now you maybe thinking, we’ll have fillCircle and strokeCircle, fillTriangle and strokeTriangle methods to draw circles and triangles. But NO. We don’t have such methods.
We need to achieve shapes other than rectangle using paths and lines. Lets see how it can be done in our coming video tutorials. Stay subscribed.

Canvas Basics: HTML5

We shall start exploring more about Canvas element of HTML5.
It’s designed to draw graphics on the fly, using Javascript.

Canvas is like a placeholder for graphics. We place a context upon canvas, upon which we draw our graphics – lines, circles, triangle, pictures etc.

HTML file
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< !DOCTYPE HTML>
<html>
 <head>
  <title>Canvas: HTML5</title>
  <meta charset="utf-8"/>
  <link href="myStyle.css" rel="stylesheet"/>
 </head>
 <body>
 
  <canvas id="holder" width="300" height="200">
    Please upgrade your browser!
  </canvas>
 
</body>
</html>

Here we have attached a style sheet to index.html
and we have the canvas element with an id, width and a height property applied to it.

We can specify some text in-between the opening and closing canvas tag, which shows up in the browser which doesn’t support HTML5’s canvas element.

CSS file
myStyle.css

1
2
3
canvas {
border: 3px groove black;
}

Here we’re applying some basic style to our canvas.

Since canvas is transparent by nature, we can’t see it unless we give it a border or fill some color into it. So, using CSS we apply 3px wide black border, for the purpose of illustration.

Canvas Basics: HTML5


[youtube https://www.youtube.com/watch?v=2lJqB9RikYo]

YouTube Link: https://www.youtube.com/watch?v=2lJqB9RikYo [Watch the Video In Full Screen.]



CSS width and height
We could even assign width and height property of canvas element via CSS, but it is not the proper way to do it.

We must give width and height property inside HTML document itself – as canvas property.

If you assign width and height via CSS, it’ll either stretch or shrink depending on the actual canvas width and height: which looks weird.

Realtime Location Tracking – Google Maps: HTML5

In this video tutorial, we show you how we can keep track of the visitor and locate him/her on Google Maps using geolocation API of HTML5.

This video tutorial is a continuation of previous videos, so please make sure to watch them before this:
HTML5 – Getting Started Guide
Geolocation API – Success Handler: HTML5
Geolocation API – Error Handle: HTML5
Google Maps Integration: HTML5
Adding Pin/Marker To Google Map: HTML5
Add Popup message To Google Map Pin: HTML5

JavaScript file
mySript.js

if( navigator.geolocation )
    {
        var optn = {
enableHighAccuracy: true,
            timeout: Infinity,
            maximumAge: 0   
        };
         var watchID = navigator.geolocation.watchPosition(success, fail, optn);    
    }
    
    else
     $("p").html("HTML5 Not Supported");

$("button").click(function(){
    
    if(watchID)
     navigator.geolocation.clearWatch(watchID);
     
    watchID = null;
    return false;
});

Here we are setting the 3rd parameter of watchPosition() method.
We’re enabling HighAccuracy, setting timeout to Infinity – i.e., it’ll keep looking for the location information for ever or until it gets it. We can set this to some numerical value and it’ll check till then before it’ll show a “Timed out” message to the user. maximumAge is set to 0, so that it fetches new location each time it’s asked for. If we set it to Infinity, it’ll forever show the cached data and will never fetch or update the new location information.

watchPosition() is a geolocation method, which keeps watching/fetching new user location data. This would be helpful for tracking users location information in realtime.

HTML file
index.html

<!doctype html>
<html>
<head>
<title>Geolocation API: Technotip.com</title>
<meta charset="utf-8"/>
<link href="css/myStyle.css" rel="stylesheet"/>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/myScript.js"></script>
</head>
<body>
<p id="map"></p>
<button>Stop</button>
</body>
</html>

We also have a stop button added to our index.html page, once the user clicks on that button, we call clearWatch() method of geolocation API and ask watchPosition() method to stop tracking the users location.

Video Tutorial: Realtime Location Tracking – Google Maps: HTML5


[youtube https://www.youtube.com/watch?v=qYFkPFtfgdI]

YouTube Link: https://www.youtube.com/watch?v=qYFkPFtfgdI [Watch the Video In Full Screen.]



By combining all the things you have learnt in this Google MAPs and geolocation API video tutorial series, you can build real time location tracking applications, which returns users location on a map, pin points it. Combining this, you could store users initial and final location, store it in database, pin point both locations on Google MAP and show them the distance or route etc.

Source Code: Full JavaScript file

mySript.js

var watchID = null;
$(document).ready(function(){
    var optn = {
enableHighAccuracy: true,
            timeout: Infinity,
            maximumAge: 0   
        };
    if( navigator.geolocation )
     navigator.geolocation.watchPosition(success, fail, optn);
    else
     $("p").html("HTML5 Not Supported");
$("button").click(function(){
    
    if(watchID)
     navigator.geolocation.clearWatch(watchID);
     
    watchID = null;
    return false;
});
    
});

function success(position)
{
    var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
                        position.coords.longitude);
    var mapOtn={
zoom:10,
center:googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
    };
    
    var Pmap=document.getElementById("map");
    
    var map=new google.maps.Map(Pmap, mapOtn);
    addMarker(map, googleLatLng, "Technotip.com", 
                  "SATISH B
About Me:https://technotip.com/about/");
}

function addMarker(map, googleLatLng, title, content){
    var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
    };
    
    var marker=new google.maps.Marker(markerOptn);
    
    var infoWindow=new google.maps.InfoWindow({ content: content, 
                                                   position: googleLatLng});
    google.maps.event.addListener(marker, "click", function(){
        infoWindow.open(map);
    });                                                
}

function fail(error)
{
    var errorType={
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
    };
    
    var errMsg = errorType[error.code];
    
    if(error.code == 0 || error.code == 2){
        errMsg = errMsg+" - "+error.message;
    }
    
    $("p").html(errMsg);
}

You can integrate MAPs feature into your existing application and release this module to your users and impress them by telling their location or you can show other users nearby to their location, this would amaze some, as to how you could know about the person living nearby :-)

Remember the position.coords.accuracy property, which returns the accuracy value in meters?
Using this value, show all the users present around a users location with that accuracy(position.coords.accuracy).

Happy learning!

Add Popup message To Google Map Pin: HTML5

In this video tutorial we shall teach you how to add a message window(popup) when the pin or the marker is clicked on a Google Map.

pin-marker-google-map-message-infoWindow

JavaScript file
mySript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function addMarker(map, googleLatLng, title, content){
var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
 
var marker=new google.maps.Marker(markerOptn);
 
var infoWindow=new google.maps.InfoWindow({ content: content, 
                                               position: googleLatLng});
    google.maps.event.addListener(marker, "click", function(){
infoWindow.open(map);
});   
}

Add the content and position information to InfoWindow constructor of Google Maps API.
Also add a event listener: once the marker is clicked, open the message window on the map.

Full JavaScript file
mySript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(document).ready(function(){
 
if( navigator.geolocation )
 navigator.geolocation.getCurrentPosition(success, fail);
else
 $("p").html("HTML5 Not Supported");
 
});
 
function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
position.coords.longitude);
var mapOtn={
zoom:10,
center:googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
};
 
var Pmap=document.getElementById("map");
 
var map=new google.maps.Map(Pmap, mapOtn);
addMarker(map, googleLatLng, "Technotip.com", 
                  "SATISH B<br /><b>About Me:</b>https://technotip.com/about/");
}
 
function addMarker(map, googleLatLng, title, content){
var markerOptn={
position:googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
 
var marker=new google.maps.Marker(markerOptn);
 
var infoWindow=new google.maps.InfoWindow({ content: content, 
                                               position: googleLatLng});
    google.maps.event.addListener(marker, "click", function(){
infoWindow.open(map);
});   
}
 
function fail(error)
{
var errorType={
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
};
 
var errMsg = errorType[error.code];
 
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
 
$("p").html(errMsg);
}

For explanation of above code, please visit previous day videos.

Add Popup message To Google Map Pin/Marker Click Event: HTML5


[youtube https://www.youtube.com/watch?v=DJHepOxO5VM]

YouTube Link: https://www.youtube.com/watch?v=DJHepOxO5VM [Watch the Video In Full Screen.]



Your location may not be shown accurately if you’re accessing the pages via your computer. Open above link in your smart phone, with GPS turned on.

Coming Up: Tracking real time location on Google Map..stay subscribed

Adding Pin/Marker To Google Map: HTML5

In this video tutorial we’ll show you how we can add a pin or marker to Google Map at a particular location.

location-pin-marker-map

This is a continuation video, so please watch below tutorials before proceeding:
HTML5 – Getting Started Guide
Geolocation API – Success Handler: HTML5
Geolocation API – Error Handle: HTML5
Google Maps Integration: HTML5

If you’re using a smart phone or any other GPS device, you can get to your exact location more accurately. To pin point your exact location, we can add a pin or the marker to your location.

Javascript File
myScript.js

1
2
3
4
5
6
7
8
9
10
function addMarker(map, googleLatLng, title){
var markerOptn={
position  : googleLatLng,
map:map,
title:title,
animation :   google.maps.Animation.DROP
};
 
var marker = new google.maps.Marker(markerOptn);
}

We do not generate map again. Since we already have it generated in success method, we’ll simply use the same map. We’ll get the position information from HTML5’s Geolocation API, convert it into googleLatLng object and pass to addMarker method. We also set some options for the marker, like the position, title and the animation. We could have two type of simple animation using properties BOUNCE and DROP. Finally pass the marker option to Marker constructor of google maps api. This would bring up the map with a nice little marker.

Full Javascript File: Google Map API
myScript.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
$(document).ready(function(){
 
if( navigator.geolocation )
 navigator.geolocation.getCurrentPosition(success, fail);
else
 $("p").html("HTML5 Not Supported");
 
});
 
function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude, 
 position.coords.longitude);
var mapOtn = {
zoom:10,
center   : googleLatLng,
mapTypeId: google.maps.MapTypeId.ROAD
}
 
var Pmap = document.getElementById("map");
 
var map = new google.maps.Map(Pmap, mapOtn);
addMarker(map, googleLatLng, "Technotip.com");
}
 
function addMarker(map, googleLatLng, title){
var markerOptn={
position: googleLatLng,
map:map,
title:title,
animation:google.maps.Animation.DROP
};
 
var marker = new google.maps.Marker(markerOptn);
}
 
function fail(error)
{
var errorType = {
0:"Unknown Error",
1:"Permission denied by the user",
2:"Position of the user not available",
3:"Request timed out"
};
 
var errMsg = errorType[error.code];
 
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
 
$("p").html(errMsg);
}

Please look at previous day videos to understand above code fully.

Adding Pin/Marker To Google Map: HTML5


[youtube https://www.youtube.com/watch?v=9v8Y0BeKB0I]

YouTube Link: https://www.youtube.com/watch?v=9v8Y0BeKB0I [Watch the Video In Full Screen.]



We could even include our own marker image, by setting the icon to your image path in the marker options.
Example:

1
2
3
4
5
6
var markerOptn={
position  : googleLatLng,
map:map,
title:title,
icon:'myPin.png'
};