How can I take a user generated canvas drawing and send to a function that recursively calls that drawing?

Question

I have the functions in place that will render the drawing according to the listed function, my question is how can I send that drawing to the function? (My input tag attempt is listed below the function js.)

Here is the function that will handle the final image-->

 function recurseImage() {   
    img = new Image();  
    img.src = myCanvas.toDataUrl();  
    fr1 = makeFrame(ctx, makeVect(400,0), makeVect(400, 0), makeVect(0, 400));
    img.onload = function(){ 
            ctx.save(); 
            newPainter = cornerSplit(imagePainter,5);
            newPainter(fr1);     
            ctx.restore();
            ctx.save();
            newPainter(flipHorizLeft(fr1));
            ctx.restore();
            ctx.save();
            newPainter(flipVertDown(fr1));  
            ctx.restore();
            ctx.save();
            newPainter(flipVertDown(flipHorizLeft(fr1)));   
}

}

<input type="button" name="recurseImage" id='recurseImage' value="Recurse It"    onClick"recurseImage()"/>

My hope is to allow the user to simply click a btn that will send the newly created canvas image into this function and display the 'recursedImage' in a separate window that the user can save as a png file if they desire. I pre-thank you and any suggestions would be very much appreciated.

Note that to be safe [you need to set the `onload` before the `src`](http://stackoverflow.com/questions/4776670/should-setting-an-image-src-to-dataurl-be-available-immediately). — Phrogz, Nov 08 '11 at 23:25

score 0 · Accepted Answer · edited Oct 02 '13 at 23:30

Here's a working example: http://phrogz.net/tmp/canvas_recursion.html

Here's the code:

var img = new Image;
var levels = 0;
img.onload = function(){
  if (++levels>4) return;
  ctx.drawImage(img,0,0,320,240);
  ctx.drawImage(img,320,0,320,240);
  ctx.drawImage(img,320,240,320,240);
  ctx.drawImage(img,0,240,320,240);
  setTimeout(function(){ img.src = ctx.canvas.toDataURL() },1000);
};
img.src = 'gkhead.jpg';

Generalized:

var img = new Image;
img.onload = function(){
  if (allDoneRecursing()) return;
  drawNewImageToContext();
  img.src = ctx.canvas.toDataURL();
};
img.src = seedImageSrc(); // You may want a toDataURL() on another canvas here

Note that this uses an image as the intermediary for the recursion, which should be fine as long as you're not upscaling the result on each iteration. If you need actual scaled/transformed canvas context commands to be composited, please say so.

thanks a ton, you've answered multiple questions Ive been stumped with regarding an image and how to access that image- — MCGRAW, Nov 09 '11 at 20:55
@Phrogz- Ive looked and can't find where to 'accept' the answer- — MCGRAW, Nov 09 '11 at 21:22

How can I take a user generated canvas drawing and send to a function that recursively calls that drawing?

1 Answers1