Как обмануть КАНВАС.
 

На локальном компьютере я вношу картинки на полотно Канвы таким кодом.

<output id="list"></output>
<input type="file" id="files" >
<script>
function handleFileSelect(evt) {
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) { continue; }
var reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="po" src=" ', e.target.result,'"id=k>'].join('');
document.all.list.insertBefore(span, null);
o();
document.getElementById('list').insertBefore(span, null);
};})(f);reader.readAsDataURL(f);}}
document.getElementById('files').addEventListener( 'change', handleFileSelect, false);
function o(){
var pervii = document.getElementById("peRVI");
var raskras = pervii.getContext("2d");
var cat = document.getElementById("k");
raskras .globalAlpha = 1;
raskras.drawImage(cat, 0, 0, 400, 400);
raskras.strokeRect(0, 0, 400, 400);
}
</script>

Всё работает прекрасно имею в виду пиксельную обработку. Может кто подскажет как избавиться от кнопки. Смотрите КЛОУНА в №4 страница 8. На сервере конечно проблем нет, но в планах.....!

http://clecar.ru/1956_09.html

Изменения пикселя в канвас возможно только на сервере, так задумано разработчиками. Получается обрабатывать пиксели на локальном компьютере, можно только если изображение загружено кнопкой (input type="file")
Вставка crs вместо (', e.target.result,'), ничего не даёт. Короче кнопка это дополнительные неудобства в составлении программы. Запрет появляется при загрузки картинки. До загрузки рисовать и заливать свои рисунки не чего не мешает. Обмануть КАНВАС я имею ввиду уйти от запрещающего флага на прямую без кнопки.

Вы меня не поняли с добавлением картинки проблем нет. Без сервера или загрузки с кнопки невозможна обработка пиксельная картинки на полотне канваса. Заливка работает только до загрузки изображения обычным способом, а ссылка не имеет ни какого отношения к полотну канваса. Я говорю о проблеме создания программы на своём компьютере. Поместив уже готовую программу на сайт, там проблем нет всё будет работать. Вот и пришлось раскраску с клоуном буквально в слепую отправить в Файловый менеджер. Естественно удалив наладочную часть кода, с которым я сюда и обратился.

Да метод drawImage, как раз и должен устанавливать флаг запрета. С кнопки input type="file", запрета нет. Всё работает как на сервере, только неудобства с составлением программы.

Вот код который отказывается работать.
function zaliv() {
var canvas = document.getElementById("peRVI");
raskras = canvas.getContext('2d');
raskras. globalCompositeOperation="source-over";
raskras.beginPath();
raskras .globalAlpha = 1;
raskras.fillStyle = "#000"
raskras.lineWidth =5;
raskras.strokeRect(0, 0, 800, 800);
raskras.strokeStyle ="#000"
raskras.closePath();
var pr=parseInt(document.all("kras1").innerHTML)+1;
var pg=parseInt(document.all("kras2").innerHTML);
var pb=parseInt(document.all("kras3").innerHTML);
var x=parseInt(document.all("korX").innerHTML);
var y=parseInt(document.all("korY").innerHTML);



document.all("zax").innerHTML=x;
document.all("zay").innerHTML=y;
var xz=parseInt(document.all("zax").innerHTML)+3;
var yz=parseInt(document.all("zay").innerHTML);
var imgd = raskras.getImageData(0, 0, 800,800);
var pix = imgd.data;
var ja= yz+36;

var i=((ja*800)+xz)*4;// -- Адрес пикселя клика -->


var right=[];// -- массив направо -->
var left=[];// -- массив налево-->
var top=[];// -- вверх вертикально-->
var bottom=[];// -- вниз вертикально-->
var wole=[];// -- всё закрашенное-->
var o=0;
var ao=0;
for (n=i, m=2560000; n<m; n+=3200){o++; right[o]=(n+4); left[o]=n-4;
pix[n]=pr; pix[n+1]=pg; pix[n+2]=pb; pix[n+3]=255; if (pix[n+3203]==255){break}} // -- вертикальнaя синяя черта вниз -->
for (n=i-3200, m=0; n>m; n-=3200){o++; right[o]=(n+4); left[o]=n-4;
pix[n]=pr; pix[n+1]=pg; pix[n+2]=pb; pix[n+3]=255; if (pix[n-3200+3]==255){break}} // -- вертикальнaя зелёная черта вверх -->
// -- o=количеству последних закрашенных пикселей -->
var s=o;
for (pen=0, pon=1000; pen<pon; pen+=1){
var a=0;
for (n=o, m=0; n>m; n-=1){
for (k=right[n], ko=2560000; k<ko; k+=4){
pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255; if (pix[k+7]==255){break} a++; wole[a]=k; }}
// -- налево розовый горизонтально -->
for (n=s, m=0; n>m; n-=1){
for (k= left[n], ko=0; k>ko; k-=4){
pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255;if (pix[k-1]==255){break} a++; wole[a]=k; }}
// -- wole[a] всё что закрасилось -->
o=0;
var s=0;
for (n=a, m=0; n>m; n-=1){if (pix[wole[n]+3203]==0){o++; top[o]=wole[n]+3200;}
if (pix[wole[n]-3200+3]==0){s++; bottom[s]=wole[n]-3200;}
}
// -- вниз чёрным вертикально -->
var te=0;
for (n=o, m=0; n>m; n-=1){
for (k=top[n], ko=2560000; k<ko; k+=3200){ pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255; if (pix[k+3203]==255){break}te++; wole[te]=k; }}
// -- вверх синим вертикально -->
for (n=s, m=0; n>m; n-=1){
for (k=bottom[n], ko=0; k>ko; k-=3200){pix[k]=pr; pix[k+1]=pg; pix[k+2]=pb; pix[k+3]=255; if (pix[k-3200+3]==255){break}te++; wole[te]=k; }}
var o=0;
var s=0;
for (n=te, m=0; n>m; n-=1){if (pix[wole[n]+7]==0){o++; right[o]=wole[n]+4;}
if (pix[wole[n]-1]==0){s++; left[s]=wole[n]-3200;}
}
if (te==0){break}
}

raskras.putImageData(imgd, 0, 0);

}

На сервере проблем нет, посмотрите мою РАСКРАСКУ.

http://clecar.ru/ris.html
и в №4 на 8 странице клоуна
http://clecar.ru/1956_09.html

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

Rise,
у Вас опечатка: a.str okeRect(0, 0, 400, 400) - пробел из ниоткуда :)

Опробовал оба варианта, картинка конечно вставляется, если убрать a.str okeRect(0, 0, 400, 400). Но не то что лейка, капризничает даже кисточка.

На сайте у меня работает по этому коду.
<script>
document.ondragstart = function(){return false;}
document.body.onselectstart = function(){return false;}
var pri = document.getElementById("pri");
var pra= pri.getContext("2d");
var pervii = document.getElementById("peRVI");
var raskras= pervii.getContext("2d");
pervii.addEventListener('mousemove', paintCanvas, false);
img = document.createElement('img');
img.onload = function (){ pra.drawImage(img, 0, 0);}
pra.clearRect(0,0,400, 400);
img.src ="risyem/kloyn.png";
</script>