<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Canvas</title>
<style>
#myCanvas {
border: 1px solid black;
}
</style>
<script>
window.onload = function () {
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext("2d");
context.fillStyle = "#dd0000";
context.fillRect(10, 10, 100, 100);
context.fillStyle = "#0000dd";
context.beginPath;
// x pos, y pos, diamteter, starting point, radians
context.arc(250, 250, 50, 0, 2 * Math.PI);
context.stroke();
// start postion (x,y)
context.moveTo(250, 250);
// end position (x,y)
context.lineTo(0, 0);
context.stroke();
context.moveTo(250, 250);
context.lineTo(500, 0);
context.stroke();
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Geolocation</title>
<style>
</style>
<script>
window.onload = function () {
navigator.geolocation.getCurrentPosition(success, fail);
}
function success(position) {
console.log(position);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('lat').innerHTML = lat;
document.getElementById('lon').innerHTML = lon;
}
function fail(e) {
alert(e.message);
}
</script>
</head>
<body>
<p>Latitude : <output id="lat"></output></p>
<p>Longitude : <output id="lon"></output></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Geolocation</title>
<style>
</style>
<script>
var watch;
window.onload = function () {
options = { enableHighAccuracy: false, timeout: 5000, MaximumAge: 1000 };
watch = navigator.geolocation.getCurrentPosition(success, fail, options);
document.getElementById('btnStop').addEventListener('click', stopWatch);
}
function success(position) {
console.log(position);
var lat = position.coords.latitude;
var lon = position.coords.longitude;
document.getElementById('lat').innerHTML = lat;
document.getElementById('lon').innerHTML = lon;
}
function fail(e) {
alert(e.message);
}
function stopWatch(e) {
navigator.geolocation.clearWatch(watch);
}
</script>
</head>
<body>
<p>Latitude : <output id="lat"></output></p>
<p>Longitude : <output id="lon"></output></p>
<button id="btnStop">Stop Tracking</button>
</body>
</html>