HTML5 Samples

by Eric Rowell  HTML5 Canvas Planets Image Map
Demo here: http://www.html5samples.com/Files/planets.html

<script src="http://www.html5samples.com/Files/kinetic2d-v1.0.4.js">
</script>
<script>
    window.onload = function(){
        var kin = new Kinetic_2d("myCanvas");
        var canvas = kin.getCanvas();
        var context = kin.getContext();
        var showImageMap = false;
        var displayText = "";
        context.fillStyle = "red";
        context.font = "20pt Calibri";

        var planets = {
            Mecury: {
                x: 46,
                y: 126,
                radius: 32
            },
            Venus: {
                x: 179,
                y: 126,
                radius: 79
            },
            Earth: {
                x: 366,
                y: 127,
                radius: 85
            },
            Mars: {
                x: 515,
                y: 127,
                radius: 45
            }
        };

        var imageObj = new Image();
        imageObj.onload = function(){
            kin.setDrawStage(function(){

                // draw planets
                context.drawImage(imageObj, 0, 0, canvas.width, canvas.height);

                for (var key in planets) {
                    var planet = planets[key];

                    this.beginRegion();
                    context.beginPath();
                    context.arc(planet.x, planet.y, planet.radius, 0, Math.PI * 2, false);
                    this.addRegionEventListener("mouseover", function(){
                        displayText = key;
                    });
                    this.addRegionEventListener("mouseout", function(){
                        displayText = "";
                    });
                    if (showImageMap) {
                        context.fill();
                    }
                    context.closePath();
                    this.closeRegion();
                }

                // draw display text
                context.save();
                context.fillStyle = "white";
                context.fillText(displayText, 10, 30);
                context.restore();
            });

            var checkbox = document.getElementById("checkbox");
            checkbox.addEventListener("click", function(){
                showImageMap = !showImageMap;
                kin.drawStage();
            }, false);

        };
        imageObj.src = "planets.png";
    };
</script>

Incoming search terms:

• html5 image map
• canvas in html5
• html5 canvas planet
• html5 canvas barchart text
• kinetic-v1 js html5 canvsa
• kineticjs zoom
• html5 usa map
• hyml5 click image sound
• text fonts in html 5 kinetic
• hyml5 maps oyun