В  FF  почему то циферки не сходятся с теми что записываю в getImageData, когда их повторно извлекаю их того же самого getImageData для проверки.
Более подробно вопрос изложен http://forum.kaimi.ru/viewtopic.php?id=219
При работе с изображениями на холсте треть от общего числа изменений попадает в брак.

Есть ли этому объяснение?

Чтобы не засорять интернет привел здесь только ссылку на сам вопрос.
Но если нужно тут изложить подробно, то токмо ради пользы дела, пожалуйста:

Почему не сходятся цифры с теми что записываю в getImageData, когда их повторно извлекаю их того же самого getImageData для проверки:

var x = 256, // 255 является максимальным значением 
y = 1, // Coordinates of image pixel that we will modify 
cxy = x*y, can = document.createElement('canvas');can.width = x;
can.height = y;document.body.appendChild(can);
var ctx = can.getContext('2d'),  // Get drawing context
o=new Image(); //создание нового объекта
o.onload=function() {
 ctx.drawImage(o,0,0); // размещение объекта на холсте
 var imDat = ctx.getImageData(0, 0, can.width, can.height);//получаем bitmap     
 for(var j =0; j<cxy;j++){ // Set pixel color - начинаем запись своих чисел (заменяем то что было)   
   imDat.data[j] = j;               
 }              
 ctx.putImageData(imDat, 0, 0);//перезапись рисунка с обновленными данными 
 
 //повторно извлекаем свои же только что записанные данные для проверки
 var imDat2 = ctx.getImageData(0, 0, can.width, can.height);
 var eh; 
 for(var j =0; j<cxy;j++){ // свераем старые и новые данные в порядке возрастания чисел
  eh = imDat.data[j] == imDat2.data[j]; eh = eh?'':' -----> '+eh;   
  // выводим на печать результаты проверки
  document.write(j+" ... "+imDat.data[j]+" == "+imDat2.data[j]+ " <b>" +eh+"</b><br>");  
 } 
};
o.src="1.jpg"; //любой ваш рисунок

Вот это я получаю в браузере,
false это те строки, в которых числа мной записанные обратно выходят совершенно непонятные
(например записал 10, а получил 23, записал 20, а получил назад 22)  :

0 ... 0 == 0
1 ... 1 == 85 -----> false
2 ... 2 == 85 -----> false
3 ... 3 == 3
4 ... 4 == 36 -----> false
5 ... 5 == 36 -----> false
6 ... 6 == 36 -----> false
7 ... 7 == 7
8 ... 8 == 23 -----> false
9 ... 9 == 23 -----> false
10 ... 10 == 23 -----> false
11 ... 11 == 11
12 ... 12 == 17 -----> false
13 ... 13 == 17 -----> false
14 ... 14 == 17 -----> false
15 ... 15 == 15
16 ... 16 == 26 -----> false
17 ... 17 == 26 -----> false
18 ... 18 == 26 -----> false
19 ... 19 == 19
20 ... 20 == 22 -----> false
21 ... 21 == 22 -----> false
22 ... 22 == 22
23 ... 23 == 23
24 ... 24 == 28 -----> false
25 ... 25 == 28 -----> false
26 ... 26 == 28 -----> false
27 ... 27 == 27
28 ... 28 == 32 -----> false
29 ... 29 == 32 -----> false
30 ... 30 == 32 -----> false
31 ... 31 == 31
32 ... 32 == 36 -----> false
33 ... 33 == 36 -----> false
34 ... 34 == 36 -----> false
35 ... 35 == 35
36 ... 36 == 39 -----> false
37 ... 37 == 39 -----> false
38 ... 38 == 39 -----> false
39 ... 39 == 39
40 ... 40 == 41 -----> false
41 ... 41 == 41
42 ... 42 == 47 -----> false
43 ... 43 == 43
44 ... 44 == 48 -----> false
45 ... 45 == 48 -----> false
46 ... 46 == 48 -----> false
47 ... 47 == 47
48 ... 48 == 50 -----> false
49 ... 49 == 50 -----> false
50 ... 50 == 50
51 ... 51 == 51
52 ... 52 == 55 -----> false
53 ... 53 == 55 -----> false
54 ... 54 == 55 -----> false
55 ... 55 == 55
56 ... 56 == 56
57 ... 57 == 60 -----> false
58 ... 58 == 60 -----> false
59 ... 59 == 59
60 ... 60 == 60
61 ... 61 == 64 -----> false
62 ... 62 == 64 -----> false
63 ... 63 == 63
64 ... 64 == 64
65 ... 65 == 68 -----> false
66 ... 66 == 68 -----> false
67 ... 67 == 67
68 ... 68 == 68
69 ... 69 == 71 -----> false
70 ... 70 == 71 -----> false
71 ... 71 == 71
72 ... 72 == 74 -----> false
73 ... 73 == 74 -----> false
74 ... 74 == 74
75 ... 75 == 75
76 ... 76 == 77 -----> false
77 ... 77 == 77
78 ... 78 == 80 -----> false
79 ... 79 == 79
80 ... 80 == 82 -----> false
81 ... 81 == 82 -----> false
82 ... 82 == 82
83 ... 83 == 83
84 ... 84 == 85 -----> false
85 ... 85 == 85
86 ... 86 == 87 -----> false
87 ... 87 == 87
88 ... 88 == 89 -----> false
89 ... 89 == 89
90 ... 90 == 92 -----> false
91 ... 91 == 91
92 ... 92 == 93 -----> false
93 ... 93 == 93
94 ... 94 == 96 -----> false
95 ... 95 == 95
96 ... 96 == 97 -----> false
97 ... 97 == 97
98 ... 98 == 100 -----> false
99 ... 99 == 99
100 ... 100 == 101 -----> false
101 ... 101 == 101
102 ... 102 == 103 -----> false
103 ... 103 == 103
104 ... 104 == 104
105 ... 105 == 107 -----> false
106 ... 106 == 107 -----> false
107 ... 107 == 107
108 ... 108 == 110 -----> false
109 ... 109 == 110 -----> false
110 ... 110 == 110
111 ... 111 == 111
112 ... 112 == 113 -----> false
113 ... 113 == 113
114 ... 114 == 115 -----> false
115 ... 115 == 115
116 ... 116 == 117 -----> false
117 ... 117 == 117
118 ... 118 == 120 -----> false
119 ... 119 == 119
120 ... 120 == 120
121 ... 121 == 122 -----> false
122 ... 122 == 122
123 ... 123 == 123
124 ... 124 == 124
125 ... 125 == 126 -----> false
126 ... 126 == 126
127 ... 127 == 127
128 ... 128 == 128
129 ... 129 == 130 -----> false
130 ... 130 == 130
131 ... 131 == 131
132 ... 132 == 132
133 ... 133 == 134 -----> false
134 ... 134 == 134
135 ... 135 == 135
136 ... 136 == 137 -----> false
137 ... 137 == 137
138 ... 138 == 139 -----> false
139 ... 139 == 139
140 ... 140 == 140
141 ... 141 == 142 -----> false
142 ... 142 == 142
143 ... 143 == 143
144 ... 144 == 145 -----> false
145 ... 145 == 145
146 ... 146 == 147 -----> false
147 ... 147 == 147
148 ... 148 == 148
149 ... 149 == 150 -----> false
150 ... 150 == 150
151 ... 151 == 151
152 ... 152 == 153 -----> false
153 ... 153 == 153
154 ... 154 == 154
155 ... 155 == 155
156 ... 156 == 157 -----> false
157 ... 157 == 157
158 ... 158 == 158
159 ... 159 == 159
160 ... 160 == 161 -----> false
161 ... 161 == 161
162 ... 162 == 162
163 ... 163 == 163
164 ... 164 == 164
165 ... 165 == 166 -----> false
166 ... 166 == 166
167 ... 167 == 167
168 ... 168 == 168
169 ... 169 == 170 -----> false
170 ... 170 == 170
171 ... 171 == 171
172 ... 172 == 173 -----> false
173 ... 173 == 173
174 ... 174 == 174
175 ... 175 == 175
176 ... 176 == 176
177 ... 177 == 178 -----> false
178 ... 178 == 178
179 ... 179 == 179
180 ... 180 == 181 -----> false
181 ... 181 == 181
182 ... 182 == 182
183 ... 183 == 183
184 ... 184 == 184
185 ... 185 == 185
186 ... 186 == 186
187 ... 187 == 187
188 ... 188 == 188
189 ... 189 == 189
190 ... 190 == 190
191 ... 191 == 191
192 ... 192 == 192
193 ... 193 == 193
194 ... 194 == 194
195 ... 195 == 195
196 ... 196 == 196
197 ... 197 == 197
198 ... 198 == 198
199 ... 199 == 199
200 ... 200 == 200
201 ... 201 == 202 -----> false
202 ... 202 == 202
203 ... 203 == 203
204 ... 204 == 204
205 ... 205 == 205
206 ... 206 == 206
207 ... 207 == 207
208 ... 208 == 209 -----> false
209 ... 209 == 209
210 ... 210 == 210
211 ... 211 == 211
212 ... 212 == 212
213 ... 213 == 213
214 ... 214 == 214
215 ... 215 == 215
216 ... 216 == 216
217 ... 217 == 217
218 ... 218 == 218
219 ... 219 == 219
220 ... 220 == 220
221 ... 221 == 221
222 ... 222 == 222
223 ... 223 == 223
224 ... 224 == 224
225 ... 225 == 225
226 ... 226 == 226
227 ... 227 == 227
228 ... 228 == 228
229 ... 229 == 229
230 ... 230 == 230
231 ... 231 == 231
232 ... 232 == 232
233 ... 233 == 233
234 ... 234 == 234
235 ... 235 == 235
236 ... 236 == 236
237 ... 237 == 237
238 ... 238 == 238
239 ... 239 == 239
240 ... 240 == 240
241 ... 241 == 241
242 ... 242 == 242
243 ... 243 == 243
244 ... 244 == 244
245 ... 245 == 245
246 ... 246 == 246
247 ... 247 == 247
248 ... 248 == 248
249 ... 249 == 249
250 ... 250 == 250
251 ... 251 == 251
252 ... 252 == 252
253 ... 253 == 253
254 ... 254 == 254
255 ... 255 == 255

Из диапазона чисел от 0 до 255 процентов 30  -  брак ?

09-10-2012 16:01:01
Особенно не нравятся браузеру FF числа 48, 49, 52, 53, 54, и еще ряд других.
Зная браковые числа, можно их конечно не трогать, не менять, но тогда получим искажение рисунка.
Это баг Firefox ? или есть какой то нормальный вариант тестирования и использования холста?

Первоначальный рисунок здесь вообще ни при чем.
Рисунок ведь у Вас свой, правда? а ошибки и у Вас проявились?
jpg, png - все это лишь первоначальные данные, затравка так сказать, работа ведь идет с холстом и с его рисунком но не с jpg и png.
Сглаживание в js - можно уточнить что это?

Пробовал и без png, jpg, тестировал только с прямоугольником холста, результа прежний. Вообще то это не баг браузера.

Если заполнение канваса идет равномерно, т.е. рядом расположенные пиксели меняют свое значение скажем на единичку,
то результат идеальный, один к одному, что вложил то и получил, и при проверке все сходится. Серый цвет в итоге, или что то подобное.
Но если заполнять совершенно разнобойными числами, например 6, 207, 54 ..., то правильными при проверке оказывается лишь малая часть от общего количества изменений.
Как Вы и говорите наступает какое то сглаживание.  Например 58,59,60,61,62 заменяются на 60,60,60,62,61 (странно, да?).
Ну а резкие границы цвета и прозрачности, они же есть ? И где почитать за это самое сглаживание? Что там складывается, перемножается, группируется?

Тема перенесена из форума «Firefox» в форум «Разработка».

Я прошу прощения за археологизм, но на тему использования canvas пока мало информации на русском языке, поэтому напишу, что у вас ошибка в коде, вот здесь:

for(var j =0; j<cxy;j++) {   
   imDat.data[j] = j;               
}

Нельзя просто порядковые номера присвоить данным, а вы делаете именно это. Если поймете здесь свою ошибку, то и проблемы вами озвученной не будет в принципе.

Резюмирую:
То, что записываем в getImageData, то и получим при повторном извлечении их из того же самого getImageData.

svtux ошибка и правда в этом месте, т.к. других мест как бы не так и много, и видимо Вы знаете причину, но я не могу понять почему так нельзя делать, ведь присваиваемые значения могут быть любыми?  в т.ч. и упорядочеными по возрастанию/убыванию ?

Что интересно, если закоментировать document.write , то можно увидеть измененную картинку с новыми значениями (от 0 до 255), визуально это серо-белые градиентные полоски расположенные вертикально. И это доказывает что браузер все же воспринял новые значения и отобразил их, а вот почему при повторном считывании обновленных данных проявляется ошибка. Может как то передача по ссылке происходит, а не по значению?

okkamas_knife - вот так всегда, Вам понятно мне пока не очень
getImageData и putImageData это две не связанные между собой функции - это так.

канвас изначально не предназначен для хранения информации - хорошо, не предназначен, но ведь и не запрещено как бы воспользоваться таким положением.
Он предназначен для отображения переданной ему инфы и получения изображения, которое получается в результате рендеринга - на первый взгляд, а кто не дает воспользоваться им как хранилищем?

var imDat2 - это вторая, объявленная переменная, совершенно новый объект.

<!DOCTYPE html><HTML><body><script>
var x=256,y=100,cxy=x*y*4,can=document.createElement('canvas');can.width=x;can.height=y;document.body.appendChild(can);
var ctx=can.getContext('2d'),o=new Image();
o.onload=function(){
 ctx.drawImage(o,0,0);
 var imDat=ctx.getImageData(0,0,can.width,can.height),errr='',i=0;

 for(var j =0; j<cxy;j++){
 //for(var j =0; j<100;j++){
  imDat.data[j] = i*1;
  //imDat.data[j] = 120;
  //i=i<255?i+1:0;
  i=i<255?i+1:0;
 }
 ctx.putImageData(imDat, 0, 0);
 i = 0;
 
 var imDat2 = ctx.getImageData(0, 0, can.width, can.height),eh,k=0,braks=[];
 for(var j=0;j<cxy;j++){eh=imDat.data[j] == imDat2.data[j];
  if(eh)eh ='';else{k++;eh = ' -----> '+eh;if(!in_ar(i,braks))braks.push(i);}
  errr +=j+" ... "+imDat.data[j]+" == "+imDat2.data[j]+ " <b>" +eh+"</b><br>";
  i=i<255?i+1:0;
 }
 alert("From "+cxy+" -->brak ="+k+"\n\n"+Math.floor((k/cxy)*100)+' % BRAK ?');
   /*
 document.write(errr);
 document.write("<br><br><h1>FF like it:</h1><br>");
 braks.sort(function(a,b){return a-b;});
 for(var j in braks)document.write(braks[j]+" ");
 document.write("<br><h1>From 255 -> "+braks.length+" integers brak, "+ Math.floor((braks.length/255)*100)  +"%</h1><br>");
     */
};
function in_ar(a,b){for(var c in b)if(b[c]==a)return true}
o.src="1.jpg";//любой ваш рисунок ( 256 х 256 например )
</script></body></html>

можно ли пример? наглядно меняющий ситуацию

05-05-2013 13:02:27

оно тем более должно совпадать

05-05-2013 13:05:08

- ПОЧЕМУ ?

05-05-2013 13:08:13
И как сделать так, чтобы проблемы не осталось практически ?

Или все же браузер ?

Придумал же кто то примечания, попробую ими воспользоваться:

// 255 является максимальным значением
// Coordinates of image pixel that we will modify
// Get drawing context
// создание нового объекта
// размещение объекта на холсте
// получаем bitmap     
// Set pixel color - начинаем запись своих чисел (заменяем то что было)   
// перезапись рисунка с обновленными данными
// повторно извлекаем свои же только что записанные данные для проверки
// сверяем старые и новые данные в порядке возрастания чисел
// выводим на печать результаты проверки
// любой ваш рисунок

Задача поставленная: заменить в рисунке на холсте значения цвета r,g,b,a, включая и альфа канал.
И проверить то что получилось, проверить какие именно значения попали в r,g,b,a каждого пиксела.
И естественно посмотреть какой же рисунок при этом визуально получился.
Сравнить полученный рисунок с начальным, визуально отметив разницу.
Без дополнительных эффектов, без анимации, но с учетом того что это все же динамическое изменение рисунка.
Мой пробный скрипт не получился,
могу ли я Вас попросить привести код скрипта по этому вопросу?

Объяснение с wav файлом примерно понятно, в общих чертах, но не очень применительно к рисунку.

05-05-2013 19:24:03
Скрипт не скрипт, не всю задачу конечно, но хотя бы те несколько строк, которые у меня не идут, и по Вашему мнению являются причиной ошибки, т.е. как правильно их записать, чтобы избежать ошибки

Прошу прощения, что не сразу понял суть вашего эксперимента.

Итак, по-порядку:

Не совсем так. Те значения, которые вы присваеваете могут быть любыми, но они должны соответствовать принятому стандарту, и если вы будете присваивать им просто порядковые номера, то, хотя и смысла в этом не вижу, но все же записать так можно.

Ваша ошибка в том, что вы используете альфа-канал, не сразу понял описание, но вообще работать должно вот так (ссылка на оригинал):

В частности, нас интересуте то, что я выделил жирным, там написано, что пикселы должны быть возвращены без предварительного умножения на значение альфа-канала, а плотность пикселей возвращенного объекта должна быть 1 (имеется ввиду прозрачность).
В особенностях работы с растровой графикой на мониторах я не силен, но смею предположить, что происходит своего рода интерполяция получаемого оттунка цвета с учетом его прозрачности на холсте, как если бы объект был не прозрачным, т.е. плотность равна 1.

>Может как то передача по ссылке происходит, а не по значению?

Никаких ссылок здесь нет. Все согласно указанным значениям.

Как пример, пожалуйста, вот код:

var x = 256;
var y = 1;
var cxy = x * y;
var can = document.createElement('canvas');
can.width = x;
can.height = y;

document.body.appendChild(can);

var ctx = can.getContext('2d');  // Get drawing context

var imDat = ctx.createImageData(x, y); //создаем bitmap

for (var j = 0; j < cxy; j++) { // Set pixel color - начинаем запись своих чисел (заменяем то что было)
    for (var i = 0; i < 4; i++) {
        imDat.data[4 * j + i] = j;
    }
}

ctx.putImageData(imDat, 0, 0); // запись рисунка

// повторно извлекаем свои же только что записанные данные для проверки
var imDat2 = ctx.getImageData(0, 0, x, y);
var eh;

var outputString = ""; // здесь будет храниться результат проверки

for (var j = 0; j < 4 * cxy; j++) {
    // свераем старые и новые данные в порядке возрастания чисел
    eh = imDat.data[j] == imDat2.data[j];
    eh = eh ? '' : ' -----> ' + eh;
    // сохраняем результаты проверки
    outputString += ( j + " ... " + imDat.data[j] + " == " + imDat2.data[j] + " <b>" + eh + "</b><br>");
}

// выводим на печать результаты проверки
var newElem = document.createElement('div');
newElem.style.margin = "20px";
newElem.innerHTML = outputString;
document.body.appendChild(newElem);

То есть если вы прозрачность установите везде в значение 255, например, так:

for (var j = 0; j < cxy; j++) { // Set pixel color - начинаем запись своих чисел (заменяем то что было)
    for (var i = 0; i < 3; i++) {
        imDat.data[4 * j + i] = j;
    }
    imDat.data[4 * j + 3] = 255;
}

то все получится как нужно.

Очень даже предназначен, и это используется экзотическим способом для сжатия кода: доказательство по ссылке.
Только нужно учитывать спецификацию при работе с ним.

Если бы люди всегда делали только то, что нужно вам, или мне, или кому-то еще, а не им самим, то мир, наверное, был бы "серым" и унылым, зато аккуратным и стройным как муравейник или пчелиный улей.
Я стараюсь не быть столь категоричным в непонятных мне побудительных мотивах других людей.

То есть я хочу сказать, что подобное явление слишком распространено в человеческом обществе, чтобы заострять внимание на каком-то одном конкретном его проявлении.

Кто знает, может быть именно оно является причиной эволюции, её движущей силой.

Простой пример: зачем люди запекают яблоки, ведь они и свежие вкусные, причем, как говорят ученые, еще и гораздо более полезные?!

svtux спасибо !

Ссылки очень даже нужно изучить (сначала перевести придется конечно).

Велосипед точно изобретаю   Вы совершенно правы! и к тому весьма экзотическим способом, и никаких извращений, просто переставляя буковки в скриптах специфическим способом пытаюсь решить новые задачи.
И я тоже замечал, как иногда ковыряешься с чем то, придумываешь что то,  городишь страшные конструкции, а потом где то вдруг обнаруживаешь нечто отдаленно напоминающее твою задумку, и чувствуешь что твоя идея не такая уж и бессмысленная, и скорее наоборот надо приложить еще чуть-чуть усилий и все будет ок! хотя в данном случае парой строчек не обойтись, и картинка всего лишь небольшая, но достаточно важная часть общего плана, главное план есть.

Для чего нужно хранить данные именно в канвасе - так с тыщу способов применения можно придумать, а и другие способы хранения данных тоже интересны, ну кроме печенек конечно, их же могут отключать прямо в настройках.

Присваивать просто порядковые номера смысла в этом конечно же не много, но если даже так записать можно, то значит и более полезные присваивания можно творить. Это же проба, тест можно сказать.

Плотность пикселей возвращенного объекта должна быть 1 (имеется ввиду прозрачность) - получается что модификации канваса не позволят делать наложение рисунков? частичное или полное, а жаль!   
Интерполяция виновата ! и браузер тоже, ну никак развернуться не дает 

globalAlpha = значение прозрачности
Это свойство применяет значение прозрачности ко всем фигурам, рисуемым на холсте (canvas). Допустимое значение может быть от 0.0 (полностью прозрачный) до 1.0 (непрозрачный).

Таки да   а если к примеру при некотором событии хочу в верхнем рисунке изменить прозрачность отдельных пикселей или групп произвольных пикселей, не квадратиков, чтобы просвечивалась нижняя картинка с 1.0 на 0.4 ? и затем через время на 0.0 ? менять верхнюю картинку на другую заготовку? При плавном изменении прозрачности заготовок несколько потребуется.

При работе с холстом есть одна особенность - он статичен. То есть если вы хотите сделать анимацию, то вам придется каждый раз перерисовывать весь холст заново.

В вашем случае это означает следующее:

То вам нужно будет перерисовать оба рисунка: нижнюю картинку и верхнюю с нужной вам прозрачностью хоть полностью, хоть частично.

И снова для этого нужно будет нанести на холст оба рисунка, предварительно его очистив, разумеется.

Заготовку можете вычислять программно в javascript (можно хранить её в памяти, но чаще "дешевле" пересчитать из определенного состояния).

Пример по ссылке:
здесь задан рисунок на белом фоне в формате jpeg;
фон холста для наглядности покрашен в синий цвет;
в начале происходит преобразование картинки в черно-белую;
затем отсеивание белых точек с цветом от rgb(240, 240, 240) и выше и установка их прозрачности в 0.0;
после чего я запоминаю индексы непрозрачных точек для ускорения их обработки в дальнейшем;
и наложение поверх черно-белого изображения его цветной копии с разной степенью прозрачности от 255 до 0 и обратно с шагом 10.

Пример интересен. Надо поэкспериментировать.

Верхняя картинка где нужные пиксели полностью прозрачны тоже выход, но
плавность перехода прозрачности прямым образом не обеспечена.

Телевидение: смена 24 кадров дает впечатление плавного изменения изображения лица человека с серьезным выражением на улыбку,
перерисовывая только часть изображения, относящегося к лицу не простая задача, но зато и множество кадров не потребуется,
отличие от телевидения, скорость, и рациональность действия.

перерисовывать весь холст заново - или часть, т.е. холстов может быть несколько (естественно в качестве демо страницы, т.к. никто реально такое делать не будет)

Разница анимация и телевидение. Превращение изображения лица мужчины в изображение лица женщины, ребенка, взрослого, динамическое изменение контуров, цветов,  перемещение объекта по экрану (холсту). Тогда и полный ОК!
Пока альфа канал "туговат".

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

Ссылки на гугл - универсально! Там правда всего дофигища ))))))

Демки конечно интересно, и раньше, и сейчас,
ну не эта https://developer.mozilla.org/en-US/demos/detail/html5-video-time-warp/launch
так эта: https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch
https://developer.mozilla.org/ru/demos/detail/panoramic-video/launch
https://developer.mozilla.org/en-US/demos/detail/scene-change-detection-demo/launch
НО это все кадры.
Попрозрачней : https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas
И так что не удалось пока найти демки с манипуляциями с фото хорошего разрешения и с элементами прозрачности.

Как вы справедливо заметили, я не ясно выразился. Перерисовывать весь холст, конечно же, не обязательно. Это оправдано далеко не всегда, то есть только если изменяется большая часть изображения на нём. Можно запросто менять лишь ту часть изображения, которая изменилась, хоть большую область, хоть 1 пиксель. Для каждой задачи можно найти несколько решений.

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

Так же можно заметить, что вовсе не обязательно работать с битовой картой изображения, можно использовать и глобальный альфа канал для различных буферных холстов, которые потом сводят в один главный.

Инструмент достаточно хорошо проработан, и уже написано довольно таки много различных фреймворков для работы с ним. А если использовать аппаратное ускорение при работе с контекстом webgl, то еще и скорость обработки будет настолько высока, что уже можно писать довольно амбициозные 3D приложения.

Вот. Пока я тут придумываю, серьезные люди давно изучили, и порешали,
и пример даже был.
Good потому что не только мне интересно, скорее наоборот, мне интересно что и другим.
Надо изучить то что уже есть, другими словами учиться и учиться