Untitled

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>

var a = grayscaleX('http://screenshots.en.sftcdn.net/en/scrn/76000/76818/microsoft-small-basic-22.jpg');


function grayscaleX(src){ //Creates a canvas element with a grayscale version of the color image
    //create canvas
    var canvas = document.createElement('canvas');
    //get its context
    var ctx = canvas.getContext('2d');
    //create empty image
    var imgObj = new Image();
    //start to load image from src url
    imgObj.src = src;
    //resize canvas up to size image size
    canvas.width = imgObj.width;
    canvas.height = imgObj.height;
    //draw image on canvas
    ctx.drawImage(imgObj, 0, 0);
    //get array of image pixels
    var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
//I GET ERROR IN THE ABOVE LINE

    //true means it is white colour line
    var line = false;
    var previous_line = false;
    //img number
    var img = 0;
    var pixels = new Array();
    pixels.push(0);
    //run through all the pixels
    for(var x = 0; x < imgPixels.width; x++){
        line = false;
        for(var y = 0; y < imgPixels.height; y++){
            //here is x and y are multiplied by 4 because every pixel is four bytes: red, green, blue, alpha
            var i = (y * 4) * imgPixels.width + x * 4; //Why is this multiplied by 4?
            //compute average value for colors, this will convert it to bw
            var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
            if(avg>200)
            {   //white
                avg = 300;
            }
            else
            {   //black
                avg = 1;
                line = true;
                pixels[pixels.length-1]++;
            }
            //set values to array
            imgPixels.data[i] = avg;
            imgPixels.data[i + 1] = avg;
            imgPixels.data[i + 2] = avg;
        }
        //
        if(line==false && previous_line==true)
        {
            img++;
            pixels.push(0);
        }
        previous_line = line;
    }
    alert(pixels.join());
    //draw pixels according to computed colors
    ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
    return canvas.toDataURL();
}


    </script>
  </body>
</html>