HTML5 world map

by helxsz

HTML

<div id="shim" style="position:absolute; top: 0; left:0; z-index:-1"> 
        <canvas id="canvas2" width="800" height="500" style="background-color: #000"></canvas>
    </div>

    <canvas id="canvas" width="800" height="500" style="background-color: #000" onmousemove="mouseMoved(event)">
        <p style="color: white; padding: 10px 20px">Your browser doesn't support canvas.</p>
    </canvas>

CSS

html, body {padding:0; margin:0}
body{background: black; color: #fff; font-family: Tahoma;}

JavaScript

var context2, canvasEl, context;
    
var iOffsetX = 19.302721088435362;
var iOffsetY = -2.0408163265306314;
var iRatio = 0.08503401360544217;
    
var sBGColor = "#000";
var sFGColor = "#333";
var sBorderColor = "#000";

var currentColour = '';
var countryColours = [];

var visitedCountries = {
    'pe': {name:'Peru', colour:''},
    'id': {name:'Indonesia', colour:''},
    'cn': {name:'China', colour:''},  
    'ua': {name:'Ukraine', colour:''},
    'by': {name:'Belarus', colour:''},
    'kz': {name:'Kazakhstan', colour:''},
    'tr': {name:'Turkey', colour:''},
    'za': {name:'South Africa', colour:''},
    'ar': {name:'Argentina', colour:''}, 
    'cl': {name:'Chile', colour:''}, 
    'cu': {name:'Cuba', colour:''}, 
    'mx': {name:'Mexico', colour:''}, 
    'br': {name:'Brazil', colour:''}, 
    'ru': {name:'Russian Federation', colour:''}, 
    'us': {name:'United States', colour:''},  
    'gb': {name:'United Kingdom', colour:''}, 
    'fr': {name:'France', colour:''}, 
    'it': {name:'Italy', colour:''}, 
    'eg': {name:'Egypt', colour:''}, 
    'at': {name:'Austria', colour:''}
}; 

function randomHex()
{
    var hexs = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];
    var colour="";
    for (i=0; i<6; i++)
    {
        colour+= hexs[Math.round(Math.random()*14)];
    }
    return '#'+colour;
}

function drawMap(sCountry, sColor, context) 
{
    context.fillStyle = sColor;
    context.strokeStyle = sBorderColor;
    context.beginPath();

    // loop through paths
    for (var iPath = 0; iPath < oWorldMap[sCountry].length; iPath++) {
        context.moveTo((oWorldMap[sCountry][iPath][0][0] * iRatio) - iOffsetX, (oWorldMap[sCountry][iPath][0][1] * iRatio) - iOffsetY);
        for (iCoord = 1; iCoord < oWorldMap[sCountry][iPath].length; iCoord++) {
            context.lineTo((oWorldMap[sCountry][iPath][iCoord][0] * iRatio) - iOffsetX, (oWorldMap[sCountry][iPath][iCoord][1] * iRatio) - iOffsetY);
        }
       ...