Image map coordinates into Canvas lines?

Question

I need to convert this area map:

<area shape="poly" coords="61,134,61,129,63,124,61,120,64,116,62,112,66,108,67,111,70,109,72,107,73,101,72,97,69,95,72,92,73,96,72,106,76,108,76,110,78,113,82,113,83,120,93,127,102,123,107,129,104,130,92,130,81,125,77,122,75,122,68,129,67,130,67,130,73,124,67,130,67,130,73,124,74,119" href="javascript:;" alt="formentera" >

Into one of this following format, using jQuery and canvas:

..
var canvasi = document.getElementById("canvasIbiza");
      $.stx = canvasi.getContext("2d");
..
case"ibizaciudad":
            $.stx.save();
            $.stx.beginPath();
            $.stx.moveTo(77.6, 58);
            $.stx.bezierCurveTo(77, 57.9, 75.8, 57.7, 75.2, 57.3);
            $.stx.bezierCurveTo(74.5, 56.9, 74.3, 56.1, 73.9, 55.5);
            $.stx.lineTo(71.3, 56.3);
            $.stx.bezierCurveTo(70.5, 56, 69.7, 55.5, 69, 55.2);
            $.stx.bezierCurveTo(67.6, 54.6, 65, 53.7, 64.8, 53.7);
            $.stx.bezierCurveTo(64.7, 53.7, 63.4, 53.9, 63.2, 53.9);
            $.stx.bezierCurveTo(63.1, 53.9, 63, 53.8, 62.8, 53.8);
            $.stx.bezierCurveTo(63.4, 54.4, 64.2, 54.8, 64.7, 55.6);
            $.stx.bezierCurveTo(65, 56.2, 64.9, 57, 65, 57.8);
            $.stx.bezierCurveTo(65.5, 58.1, 68.3, 59.5, 68.3, 59.9);
            $.stx.bezierCurveTo(68.3, 60.2, 66.7, 61.8, 66.7, 61.9);
            $.stx.bezierCurveTo(66.9, 62.1, 69.1, 63.8, 69.1, 64);
            $.stx.bezierCurveTo(69.1, 64.1, 69.1, 64.2, 69.1, 64.2);
            $.stx.lineTo(71.4, 63.4);
            $.stx.lineTo(70.8, 61.4);
            $.stx.lineTo(73.6, 62.1);
            $.stx.lineTo(73.4, 58.6);
            $.stx.lineTo(78.4, 61.2);
            $.stx.lineTo(77.6, 58.4);
            $.stx.lineTo(77.6, 58);
            $.stx.closePath();
            $.stx.fillStyle = a;
            $.stx.fill();
            $.stx.restore();
            break;

Which corresponding area's map is:

<area shape="poly" coords="80,57,78,57,76,55,74,56,71,55,67,53,66,53,65,53,67,55,67,57,71,59,69,61,71,63,71,64,73,63,73,61,76,62,76,58,81,61,80,58,80,57,80,57" href="javascript:;" alt="ibizaciudad" >

Previous developer Did this and I have no clue how it works,

Any idea?

Should it be there actually a relation among coords? I really can't see the relation.

Answer 1

Those two area elements are for two different ..well, areas. :-)

The first one represents the bottom island part (Formentera) while the seconds one (ciudad = city) lines up some city in the northern-west part of the island - they are not related or combined in any way for the canvas as such.

So what the previous developer did is not clear but the bezier implementation is probably there only to smooth out some corners of the rendition.

To simply convert the area polygon map area to canvas you can can simply extract the poly coordinates from the element and apply them directly as they represents pixels.

First an example of using the polygons directly followed by an example that show another approach to smooth the lines to match the Bezier approach.

First example - polygon lines:

ONLINE DEMO HERE

var canvasi = document.getElementById("canvasIbiza"),

    /// get area element
    area = $('area:first'),

    /// get the coords from its attribute and covert to array
    coords = area.attr('coords').split(','),

    i = 0, len = coords.length;

$.stx = canvasi.getContext("2d");    

/// loop through the coordinate couples
$.stx.beginPath();

for(;i < len; i += 2) {
    i === 0 ? $.stx.moveTo(coords[i], coords[i + 1]) : $.stx.lineTo(coords[i], coords[i + 1]);
}

$.stx.closePath();

/// stroke or fill path
$.stx.stroke();

This will render this outline:

If you need smoothed line I would suggest you take a look at my canvas extension curve to get a cardinal spline going through the points.

You then simply modify the code slightly and no need for the loop as curve takes an array by default:

Second example - smoothed polygon lines:

ONLINE DEMO HERE

$.stx.beginPath();

$.stx.curve(coords, 1);  /// coords and tension set to 1.0 (default 0.5)

$.stx.closePath();
$.stx.stroke();

Not so much difference as the image is very tiny with these coordinatess but this results in:

If you run both of the areas you will see that they are located different places: