Рисование изображения; создание и возвращение обьекта.
 

Особый скрипт для Canvas:
http://solovei95.github.com/jspack/other/img.html (пример)

Он нужен, если "PointInPath" уже не хватает!
Рисуется картинка как особый обьект!
Короче говоря - можно проверить, находится ли курсор на непрозрачном пикселе картинки-обьекта (но не контекста).

https://github.com/Solovei95/jspack/...her/libs/jp.js (исходники)

Везде в источниках описан этот алгоритм при определении цвета точки.

this.pointInPixel = function(x,y){
var idat = ctx.getImageData(0,0,path.width,path.height);

if(x==null){x=0;}
if(y==null){y=0;}

x = parseInt(x);
y = parseInt(y);

var i = (y * path.width + x) * 4;
if(idat.data[i+3]==0)
{return false;} else
{return true;}
}

return this;
};

Насколько я понимаю это продолжение темы что ты "придумал" как изображение объектом хранить. Объясни ,что ты по твоему мнению "придумал" или "применил первым"? И я не понимаю что это даёт по сравнению со стандартным методом. Определял бы ты цвет точки тогда да. А так это аналог 100% стандартной функции по определению наличия точки,не обладающий какими либо расширенным функционалом по сравнению с ним,но при этом сжирающий ресурсов в сотни раз больше чем стандартный,тоже касается и быстродействия.

Вы все не правильно поняли!

Здесь картинка рисуется как обьект!
И определяет точку у обьекта, прозрачен он или нет.

Не путать контекст с обьектом, который рисуется на контексте, но имеет более широкие функции!

Спецификация:
1. Рисует изображение на основном контексте.
2. Создает новый обьект Canvas, с такой-же шириной и высотой, и что и текущий элемент. При этом изображение рисуется и там.
3. Становиться доступной функция для проверки прозрачности точки у обьекта.

Фу.....
Еще раз :-/ что ты здесь изобрёл? и код и описание этого метода более года лежит на многих сайтах.
Бред!! копируется область канвы . копируется в объект имедж-Но не в объект Canvas! Точно также как в канву заносятся только объекты имедж если изображение нужно закинуть в канву.

Не изобретай своих "спецификаций" противоречащих норм. спецификациям .

Важное обновление: в прототипе drawImage (у обьекта XCanvas):
- this.pointInPixel был исправлен на obj.pointInPixel
- заменен return this на return obj
- Обьявлена переменная obj

Это было сделано, чтобы корректно работали обьекты!
Я прошу внимательно изучить исходный код!!!

Отличать this.ctx от ctx и т.п.

Я только что радикально обновил код! Теперь вам легко разобрать:
- Рисует картинку на основном холсте
- Рисует картинку на холсте обьекта
- Возвращает обьект
- У обьекта имеется функция проверки непрозрачности точки у холста обьекта

var img = new Image();
img.src = "image.png";
img.onload = function(){
var x = new XCanvas(canvas,"2d"); //Выделяем Canvas
var i = x.drawImage(img,0,0); //Рисуем img и возвращаем обьект
var v = i.pointInPixel(100,100); //Определяем непрозрачность точки у картинки
}

Запомните - все знают алгоритм определения цвета точки!
Но здесь описан совсем не тот скрипт, что вы думаете!

Здесь описан особый метод рисования Image.

в чем он особый по сравнению с классическим лежащим на многих сайтах?в том что в нём ляп на ляпе?
var XCanvas = function(canvas,type){
this.canvas = canvas; ????????
this.ctx = this.canvas.getContext(type);
}
а если ид будет неправильным?
чегото ты мне напоминаешь Геворг. ник сменил?
и даже скажу больше-зачем получать всё изображение. достаточно получить его участок. нач. коорд там где мышь,конечные 1,1. итого получим однопикселное изображение ,какое разложив датой получим массив из 4х элементов . 4 й элемент это альфа.Итого всё то что ты написал сведётся к строкам.
1 навесить обработчики на канву
2 определить координаты клика на ней
3 получить однопиксельное изображение разложить его на составляющие
4 если код 4 го элемента не равен 0 то это точка
На всё про всё макс 10 строк.

dmitriymar,
Вы мне щас намекнули про получение 1х1 из getImageData.
А теперь идите и посмотрите исходный код еще раз!

Вот это вы имели ввиду?

if(x==null){x=0;}
if(y==null){y=0;}

x = parseInt(x);
y = parseInt(y);

var idat = obj.ctx.getImageData(x,y,1,1);

if(idat.data[3]==0)
{return false;} else
{return true;}

Это исправленная строчка в коде!

смотрел ,ничего нового и оригинального по сравнению с известным всем алгоритмом не увидел,увидел море косяков и строки ненужного кода.вообще не понимаю зачем объекты плодить-чтоб память жрали?
обработчик онклик на канву. и функция определения альфы и всё 10 строк макс
а это зачем ?
if(x==null){x=0;}
if(y==null){y=0;}
клик на канве по любому будут координаты
x = parseInt(x);
y = parseInt(y);
это зачем? приведение типов и так отработает.
итого:
в обработчике определить на каком клик,отменить всплытие,отменить стандартное поведение-что в коде не сделано.
определить альфу
И всё.

Я кароче сделал простую строку!

//Check Point in Canvas of Image Object
obj.pointInPixel = function(x,y){
  if(obj.ctx.getImageData(x,y,1,1).data[3]==0) {
    return false;
  } else {
    return true;
  }
}

Я кароче добавил colorPick.
Спецификации нет!
Описание: просто возвращает RGBA.

ColorPick настолько суровая функция, что берет цвет пикселя у основного контекста.

а в канве откуда берётся не из основной?