My objective is to take an image and manipulate it so that it appears there are horizontal and vertical bars over it. I understand that logically I need to step through the pixels and set the RGB value to zero for black for every xth row and every yth col
computer science
Description
My objective is to take an image and manipulate it so that it appears there are horizontal and vertical bars over it. I understand that logically I need to step through the pixels and set the RGB value to zero for black for every xth row and every yth column of the image. The logic I am attempting to use in my code is only returning the image in it original state. Can you point in the right direction? Image to use: Canvas to fill: Your browser does not support the HTML5 canvas tag. //Put some vertical dark bars and a couple of horizontal bars on an image //Paramenter c is a canvas object and img is an image object. function putInJail(c, img) { var ctx = c.getContext("2d"); ctx.drawImage(img, 0, 0); //put the image on the canvas var imgData = ctx.getImageData(0, 0, c.width, c.height); //get picture data i.e the pixels // add the bars var i; var j; var x; //this for loop manipulates the pixel values for (i = 0; i
