In my last post, I talked about not being able to get copy working. Well after a couple sleepless days and a LOT of help form my class. (Dave, don’t forget to give them contribution marks). We finally figured it out. Anyhow, I was missing a big concept. Like I stated in my previous post i was using:
this.data.pixels = buildImageObject(obj).pixels;
this changes the way the pixel array is set up. After calling this function every index of the pixel array has “rgba(r,g,b,a)”, so when you go to copy pixels from one index to another and then draw the image using image() you get an error.
Canvas uses a pixel array that holds each color in an array index. So if we refer to the color above, pixels[i] = r, pixels[i+1] =g, pixels[i+2] = b, pixels[i+3] = a. This is a one dimensional array and the size = width*height*4.
The code for this function is a little complicated, it consists of 2 for loops. Changing the first row is easy. The trick is getting to the next row, by jumping indexes. I think my code still has some bugs. But here is a screen shot:
Anna on Computing 