Put Image Data with Alphas? - More Canvas Trouble

[MrFish]

This is a long question so bear with me. I've got an ipad webapp I'm working on where you can draw on a canvas and save it. Like a more basic paint program. I need to be able to upload and image to the background and draw on it. Right now that wouldn't be too difficult since I got the drawing functionality and it wouldn't be hard to just print the image to the background and draw on it. The problem I'm having is that it also needs to have manageable layers. This means it needs to support alpha pixels. So what I've done is written a panel class that when paint is called it moves down through it's child panels and paints their buffered images to the temp image. Then I take that and paint it over the parent- continueing until the image is flattened to a temporary image. This works fine- especially on a desktop. But to accomplish this I had to write the putImageData code from scratch which loops through the array of pixels and paints them taking the alpha in account. Like so-

var offset = (canvasW*4*y)+x*4;  for(var r = 0; r < newHeight; r++)  {   var lineOffset = (size.width*4 - columns)*r + offset;   for(var c = 0; c < columns; c+=4)   {    var start = (r*columns)+c;    var destStart = start+lineOffset;    var red = imageData[start];    var green = imageData[start+1];    var blue = imageData[start+2];    var alpha = imageData[start+3];       var destRed = canvasData[destStart];    var destGreen = canvasData[destStart+1];    var destBlue = canvasData[destStart+2];    var destAlpha = canvasData[destStart+3];       var opacity = alpha/255;    var destOpacity = destAlpha/255;    var invOpacity = 1-opacity;       var newRed = Math.abs(red - ((red-destRed)*invOpacity));    var newGreen = Math.abs(green - ((green-destGreen)*invOpacity));    var newBlue = Math.abs(blue - ((blue-destBlue)*invOpacity));       canvasData[start+lineOffset] = newRed;    canvasData[start+lineOffset+1] = newGreen;    canvasData[start+lineOffset+2] = newBlue;    canvasData[start+lineOffset+3] = 255;   }  }

This loop takes about 50 miliseconds per layer. Pretty pathetic already but I would take it if this was for a desktop. Takes a whopping 1200 miliseconds for the ipad! So I tested it with the original putImageData (which doesn't support alpha) and it was still not very impressive but it's the best I got I'm thinking. So here is my problem. I know there is an overal opacity for drawing with canvases but it needs to be able to draw some pixels completely opaque and some completely transparent. Is there an putImageData that includes opacity? If not any recommendations on how I can accomplish this? I saw some people were using css and different <canvas> elements to create layers. Is this the way to go?