I write this html code :

<div id="container">
        <canvas id="imageView" width="1181" height="1181">
            <p>Unfortunately, your browser is currently unsupported by our web 
                application.</p>
        </canvas>
        <script type="text/javascript">
            window.onload = function() {
                var c = document.getElementById('imageView');
                var cxt = c.getContext('2d');
                var img = new Image();
                img.src = "map.jpg";
                cxt.drawImage(img, 0, 0);
            };
        </script>
</div>

And write this javascript :

this.mousemove = function(ev) {
                        if (!tool.started) {
                            return;
                        }

                        var x = Math.min(ev._x, tool.x0),
                                y = Math.min(ev._y, tool.y0),
                                w = Math.abs(ev._x - tool.x0),
                                h = Math.abs(ev._y - tool.y0);
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        if (!w || !h) {
                            return;
                        }
                        context.clearRect(x, y, w, h);
                        context.strokeRect(x, y, w, h);

this code is make a rectangle . I want change this rectangle to a area map , that when I click on the area do something , (for example open google) .

I write this html code :

<div id="container">
        <canvas id="imageView" width="1181" height="1181">
            <p>Unfortunately, your browser is currently unsupported by our web 
                application.</p>
        </canvas>
        <script type="text/javascript">
            window.onload = function() {
                var c = document.getElementById('imageView');
                var cxt = c.getContext('2d');
                var img = new Image();
                img.src = "map.jpg";
                cxt.drawImage(img, 0, 0);
            };
        </script>
</div>

And write this javascript :

this.mousemove = function(ev) {
                        if (!tool.started) {
                            return;
                        }

                        var x = Math.min(ev._x, tool.x0),
                                y = Math.min(ev._y, tool.y0),
                                w = Math.abs(ev._x - tool.x0),
                                h = Math.abs(ev._y - tool.y0);
                        context.clearRect(0, 0, canvas.width, canvas.height);
                        if (!w || !h) {
                            return;
                        }
                        context.clearRect(x, y, w, h);
                        context.strokeRect(x, y, w, h);

this code is make a rectangle . I want change this rectangle to a area map , that when I click on the area do something , (for example open google.) .

• javascript
• html
• canvas

2 Answers 2

If I understand you correctly you want to invoke a function when you hit a pixel on the actual map - not just in the map area.

Method 1

You can check a map click in more than one way. You can simply check for the pixel value at the click point to check if it is inside the area you want it to be by paring the map color value.

I provided an example below for this method.

Method 2

You can pre-define a polygon which traces the outline of the map area you want to check.

Then build a path (ctx.beginPath(); and ctx.lineTo(..); etc.) to allow the use of the method:

if (ctx.isPointInPath(x, y)) { ... };

This is a good method if you have small regions to check.

Method 3

Store a separate image of the map containing only a matte (sort of an alpha map), That is usually black (or transparent) for non-clickable areas, white for clickable areas.

This is useful if your map is plex color-wise and a simple pixel value check is not trivial.

And speaking of which: you can even provide different solid color values for different areas so that you can define red color = USA, blue = Argentina, etc. As these are not visible to the user the only thing that matters is that the color value can be recognized (for this reason don't save images for this use with an ICC color profile).

Then project the mouse position from the click onto the matte image (which is basically an off-screen canvas where the matte image is drawn into) and check for the color (white or other color).

Example for method 1

This is a simple example, but in any case there are a couple of things you need to know in advance:

1. That the image is loaded from same server as the page or from a domain that allow cross-origin use. Or else you cannot grab a pixel from the map due to security reasons.
2. You need to know what color or alpha value to check for. If the map is solid and everything is transparent you just need to check for alpha value above zero (as in this example), and if not just check the RGB value of the region you want to trigger an action with.

ONLINE DEMO HERE

HTML:

<canvas width=725 height=420 id="demo"></canvas>

JavaScript:

var ctx = demo.getContext('2d'),
    img = new Image();

/// we need to wait for the image to actually load:
img.onload = function() {

    /// image is loaded and we can raw it onto canvas
    ctx.drawImage(this, 0, 0);

    /// enable mouse click
    demo.onclick = function(e) {

        /// adjust mouse position to be relative to canvas
        var rect = demo.getBoundingClientRect(),
            x = e.clientX - rect.left,
            y = e.clientY - rect.top;

        /// grab a pixel
        var data = ctx.getImageData(x, y, 1, 1).data;

        /// check it's alpha value to see if we're in a map point
        /// this of course assumes the map has transparent areas.
        /// if not just check for the color values instead.
        if (data[3] > 0) alert('We hit map');
    }   
}

/// we need crossOrigin allowed image or we can't grab pixel later
img.crossOrigin = 'anonymous';
img.src = 'http://i.imgur./x8Ap3ij.png';

Just replace the alert with:

window.open('http://google./');

if you want it to open a new window/tab.

You can turn canvas into an anchor link by using addEventListener to listen for clicks on the canvas.

Then you can use window.open to open google in a new browser tab.

Also, you need to use image.onload to give your image time to load before using drawing it.

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


var img=new Image();
img.onload=function(){
    ctx.drawImage(img,0,0);
    canvas.addEventListener("click",function(){
        window.open("http://google.");
    });
}
img.src="https://dl.dropboxusercontent./u/139992952/stackoverflow/google.jpg";