Отрисовка в canvas методом lineTo()

[Moonlight]

Здравствуйте. Возникла проблема с выделением элементов.

У меня есть изображение, на нём расположены несколько фигур неправильной формы. При наведении на фигуру - её область окрашивается в другой цвет.

Проблема в том, что при наведении на следующую фигуру, почему-то запоминаются координаты той фигуры, на которую я наводил до этого, и выделяются сразу 2 фигуры. При наведении на третью - выделяются 3 и т.д.

Подскажите, как очистить этот метод lineTo(), чтобы при каждом новом наведении координаты перезаписывались, а не добавлялись?

При выводе курсора из области фигуры у меня запускается следующий код:

cxt.clearRect(0,0,cxt.width,cxt.height);
cxt.width = cxt.width;
cxt.globalAlpha = 1;
cxt.drawImage(img,0,0,1000,1603);
cxt.closePath();

Может что то ещё нужно добавить?

Вот ссылка, можно посмотреть http://test-host-ing.ru.swteh.ru/

Вот моя функция для отрисовки. Параметр pick отвечает за ввод/вывод курсора из области.

Постоянно тестировал её, поэтому в функции есть лишние моменты, не обращайте на них внимания.

  Reveal hidden contents

function picImage(dy, dm, pick, type){
        var c = document.getElementById("smile");
        var cxt   = c.getContext("2d");
        var img   = new Image();
        img.src   = "images/gbi.jpg";
        if(pick){
            dm -= 1;
            cxt.drawImage(img,0,0,1000,1603);
            cxt.moveTo(90,249 +dy*dm);
            cxt.lineTo(265,220+dy*dm);
            cxt.lineTo(285,235+dy*dm);
            cxt.lineTo(304,232+dy*dm);
            cxt.lineTo(315,237+dy*dm);
            cxt.lineTo(427,220+dy*dm);
            cxt.lineTo(427,190+dy*dm);
            cxt.lineTo(505,178+dy*dm);
            cxt.lineTo(525,193+dy*dm);
            cxt.lineTo(658,175+dy*dm);
            cxt.lineTo(716,230+dy*dm);
            cxt.lineTo(760,225+dy*dm);
            cxt.lineTo(840,310+dy*dm);
            cxt.lineTo(840,381+dy*dm);
            cxt.lineTo(760,303+dy*dm);
            cxt.lineTo(715,310+dy*dm);
            cxt.lineTo(658,255+dy*dm);
            cxt.lineTo(523,275+dy*dm);
            cxt.lineTo(505,260+dy*dm);
            cxt.lineTo(430,271+dy*dm);
            cxt.lineTo(430,297+dy*dm);
            cxt.lineTo(315,314+dy*dm);
            cxt.lineTo(304,309+dy*dm);
            cxt.lineTo(285,313+dy*dm);
            cxt.lineTo(265,299+dy*dm);
            cxt.lineTo(192,309+dy*dm);
            cxt.lineTo(192,325+dy*dm);
            cxt.lineTo(90,340 +dy*dm);
            cxt.lineTo(90,249 +dy*dm)
            //var isPath = cxt.isPointInPath(95,11250); // return true
        }
        if(pick){
            cxt.lineWidth = 3;
            cxt.fillStyle = '#00f';
            cxt.strokeStyle = 'red';
            cxt.globalAlpha = 0.1;
            cxt.stroke();
            cxt.fill();
            cxt.closePath();
        }else{
            cxt.clearRect(0,0,cxt.width,cxt.height);
            cxt.width = cxt.width;
            cxt.globalAlpha = 1;
            cxt.drawImage(img,0,0,1000,1603);
            cxt.closePath();
        }
        return false;
  }

[hedgehog]

ctx.beginPath();

[Moonlight]

  On 12/6/2012 at 9:50 PM, hedgehog said:

ctx.beginPath();

Ох спасибо). Может ещё подскажите как сделать так чтобы при нажатии Ctrl+F5 или при прямом заходе на страницу изображение подгружалось на холст? Пробовал $(window).load(), setTimeout(), пока безуспешно.

[hedgehog]

  On 12/7/2012 at 3:37 PM, Moonlight said:

Ох спасибо). Может ещё подскажите как сделать так чтобы при нажатии Ctrl+F5 или при прямом заходе на страницу изображение подгружалось на холст? Пробовал $(window).load(), setTimeout(), пока безуспешно.

Смысл в том, чтобы отрисовывать изображение тогда, когда оно уже загружено. Если картинка валяется где-то в DOM, то должно отрабатывать по window load. Если картинка подгружается через JS, то надо цепляться к событию load самого изображения: http://jsfiddle.net/2Vfqf/

[Moonlight]

Да, всё работает. Спасибо, за объяснения.

[Moonlight]

Ещё вопрос. Вот я сейчас как делаю, отрисовываю на изображении несколько этажей с помощью тегов area, и при наведении на них рисую такую же область в canvas и закрашиваю её.

Можно ли как-то обойтись вообще без тегов map и area? То есть отрисовать все фигуры(этажи) в canvas ну и при наведении выделять.

Edited December 8, 2012 by Moonlight

[hedgehog]

  On 12/8/2012 at 6:44 PM, Moonlight said:

Ещё вопрос. Вот я сейчас как делаю, отрисовываю на изображении несколько этажей с помощью тегов area, и при наведении на них рисую такую же область в canvas и закрашиваю её.

Можно ли как-то обойтись вообще без тегов map и area? То есть отрисовать все фигуры(этажи) в canvas ну и при наведении выделять.

Я думаю, что можно задать дом бекграундом (чтобы не перерисовывать его почем зря), а на канвасе отрисовывать выделение в зависимости от положения курсора. По клику отлавливать координаты и выполнять соотв. действие.

PS: по части канваса я не спец.

[Moonlight]

Я понял. Если что-то полезное извлеку - напишу .