canvas mainu

by techsin

HTML

<canvas id="can"></canvas>
<img id='i' src="http://www.loc.gov/exhibits/religion/vc006815.jpg" style='display:none;'>

JavaScript

var 
draw= drawApi(),
img= $Id('i'),
can= $Id('can'), ctx= can.getContext('2d');
can.addEventListener('click',black,false);
can.height= img.height;
can.width= img.width;

ctx.drawImage(img, 0, 0); 

var y, x, cp, n, w= can.width, h= can.height, data=0, dataSorted=[], ps=[],pixels = h*w;

data= ctx.getImageData(0,0,w,h).data;

for(cp=0; cp<pixels; cp++){
    n= cp*4;
    y= ~~(cp/w);
    x= cp-((y)*w);
    dataSorted[y]= dataSorted[y] || [];
    dataSorted[y][x]={
        pn:cp,
        color:[data[(cp*4)],data[(cp*4)+1],data[(cp*4)+2],data[(cp*4)+3]]
    }
}

function black(){
    var c,sum;
    dataSorted.forEach(function(e,y){
       e.forEach(function(v,x){
            c= v.color;
            sum = Math.round(0.299*c[0] + 0.587*c[1] + 0.114*c[2]);
            ctx.fillStyle="rgba("+sum+","+sum+","+sum+","+255+")";
            ctx.fillRect(x,y,1,1);
       });
    });
}




function clk(){

for(cp=0; cp<pixels; cp++){
    n=cp*4;
    y=~~(cp/w);
    x=cp-((y)*w);
     if (data[n]<150 &&
        data[n+1]<150 &&
        data[n+2]<150) {
          ps.push([x,y]);
        }
}

    for(var tt=0; tt<ps.length; tt++){
       draw.dot(ps[tt][0],ps[tt][1]);
    }

}

function drawApi(){
    return{
    curve:function (sx,sy,ex,ey,p1x,p1y,p2x,p2y){
    ctx.beginPath();
    ctx.moveTo(sx,sy);
    ctx.bezierCurveTo(p1x,p1y,p2x,p2y,ex,ey);
    ctx.stroke();
},
    dot:function(x,y){
    ctx.beginPath();
//    ctx.arc(x,y,1,0,2*Math.PI);
    ctx.fillStyle='red';
    ctx.fillRect(x,y,1,1);
    //ctx.fill();
    }
};
}

function $Id(x) { return document.getElementById(x);}