Проблема с изменением альфа-канала на canvas

[vanix]

Бьюсь над проблемой уже месяц, проблема в следующем:

Существует тег canvas в которое загружается изображение, на загружаемом изображении находится несколько разноцветных областей. При наведении курсора на область, альфа канал меняется у всех пикселей цвета области по следующему алгоритму:

var imgd = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pix = imgd.data;
var x =  e.clientX + window.scrollX - this.offsetLeft - 1;
var y =  e.clientY+ window.scrollY - this.offsetTop - 1;
var number = 4*x + 4*curWidth*y;
for (var i = 0; i < pix.length; i += 4) {
    pix[i+3] = 255
    if(pix[i] == pix[number] && pix[i + 1] == pix[number + 1] && pix[i + 2] == pix[number + 2]){
        pix[i+3] = 127;
    }
}

Но при этом у пикселей цвета некоторых областей помимо альфа-канала меняется так же цвет, при чем в разных браузерах по разному.

Подскажите, пожалуйста, как решить данную проблему

Edited January 17, 2012 by vanix

[Great Rash]

Юзайте globalAlpha

[Nekromancer]

Ага, или rgba

[vanix]

Насколько я понял globalAlpha - используется для изображения в целом, а надо изменить прозрачность у определенной области.

Картинка и так хранится с использованием rgba, то есть каждый 4-ый элемент массива pix отвечает за альфа-канал.

[Great Rash]

Вам все равно надо будет перерисовывать всё изображение целиком, при перерисовке части изображения будет изменяться цвет. Сохраняйте состояние в стек (.save(), .restore()) и перерисовывайте целиком.