При рисовании мышкой у вас не чётко чёрные пиксели и поэтому они не ру. У вас вторая функция вообще не по какому-либо rgb-цвету перебирает как в первой функции, а по прозрачности, т. к. i = 3 - это прозрачность первого пикселя. Естественно это работает, т. к. все остальные пиксели прозрачны.
Вот так должно работать и мышкой и с картинкой:
function convertData(imgdata)
{
convert = [];
for(var i = 0; i < imgdata.length; i+=4)
{
if(imgdata[i] < 128)
convert.push(1);
else
convert.push(0);
}
return convert;
}