How can I retrieve a canvas image and use that image in a function all within one javaScript onClick event?

Question

This is the function that I want the canvas image retrieved into @ img.src.

            function draw() {   
            img = new Image();  
            img.src = [user defined canvas image].png    
            fr1 = makeFrame(ctx,makeVect(400,0),makeVect(400,makeVect(0, 400));
            img.onload = function(){ //<< This Im not sure of <<<
                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)));   
            }  
        }

The canvas that the image is retrieved from, is: 'canvas2' its context is 'context2' its HTML handle is 'imageCreate'

Answer 1

Due to how you worded your question, it is difficult to figure out exactly what you want. Assuming I've guessed correctly, you would want document.getElementById("canvas2").toDataURL("image/png"), to capture the canvas's image data.