html5 canvas custom shape from image

Question

I am having problems with making a RISK-like game in html. The solution I am using right now is to give each country "position: absolute;" and then position it where it belongs, but problem happens when the user wants to mouse-over or click on the desired country. Country is represented as block and has background image with shape of a country so, when you look at it, you don't see it is actually a block.

Can you give me any examples or a good resource website where I can achieve the following:

this is how it current looks like: http://s24.postimg.org/402tvyovp/image.png

this is how I want it to look and act like: http://s24.postimg.org/5cpkuysmt/image.png

So element has shape of a country, not a block, which means when user puts mouse in that shape (not the block that's surrounding it), script would execute some function.

Answer 1

Here's how to identify which custom country shape was clicked on your canvas

First, use photoshop to change each country on your map into a different unique color (a color-coded map)

(Don't worry, the user doesn't need to see this color-coded map).

Then when the user clicks on the canvas, get the color at the clickpoint and compare with your country colors like this:

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      var color=getPixelRGB(mouseX,mouseY);
      if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }          
      if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }          
      if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }          
    }

    function isColorMatch(color,red,green,blue){
        return(color.red==red && color.green==green && color.blue==blue);
    }

    function getPixelRGB(x, y) {
        var pxData = ctx.getImageData(x,y,1,1);
        var R = pxData.data[0];
        var G = pxData.data[1];
        var B = pxData.data[2];
        return({red:R, green:G, blue:B});    
    }

You might not want to display the colored-coded map for your users. If not, you can create your color-codeded map on an off-screen canvas that's identical to your on-screen canvas—except for the color coding. When the user clicks on your on-screen canvas, you just check that pixel position on your color-coded map. You get on-screen beauty + off-screen functionality.

Here's code and a Fiddle: http://jsfiddle.net/m1erickson/rmn5D/

Note that this fiddle doesn't user your exact map because of cross-site browser security warnings—you will want to substitute your own color-coded map.

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=function(){
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.drawImage(img,0,0);
    }
    img.src="yourColorCodedMap.png";


    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      var color=getPixelRGB(mouseX,mouseY);
      if(isColorMatch(color,255,0,0)){ alert("You clicked on the red country"); }          
      if(isColorMatch(color,0,255,0)){ alert("You clicked on the green country"); }          
      if(isColorMatch(color,0,0,255)){ alert("You clicked on the blue country"); }          
    }

    function isColorMatch(color,red,green,blue){
        return(color.red==red && color.green==green && color.blue==blue);
    }

    function getPixelRGB(x, y) {
        var pxData = ctx.getImageData(x,y,1,1);
        var R = pxData.data[0];
        var G = pxData.data[1];
        var B = pxData.data[2];
        return({red:R, green:G, blue:B});    
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <p>Click on a map location to get country</p>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

html5 canvas custom shape from image

Question

1 answers

solution1
1 ACCPTED 2013-04-07 22:46:55

html5 canvas custom shape from image

Question

1 answers

solution1 1 ACCPTED 2013-04-07 22:46:55

solution1
1 ACCPTED 2013-04-07 22:46:55