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.

Answer 1

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.