Question

Is it possible to assign a function as the value of a canvas element? Here is my current implementation(non-working).

    function recImagePressed(e){
     var outputCanvas = document.getElementById("outputCanvas");
     outputCanvas.value = draw();//-----this is my concern. 

    function draw() {   
   img = new Image();  
   img.src = canvas2.getContext();  
   fr1 = makeFrame(context2, makeVect(100,100), makeVect(200, 50), makeVect(50, 200));
   img.onload = function(){ 
            var newPainter = imagePainter(fr1);
            context2.save(); 
    }  
 }

Answer 1

Well, you can’t do that as you’re doing it. You also can’t do:

img = new Image();  
img.src = canvas2.getContext();  

That won’t work. But you don’t need to do that because you can draw one canvas to another with drawImage(canvas, x, y)

You need to something similar to:

var outputCanvas = document.getElementById("outputCanvas");
outputCtx = outputCanvas.getContext('2d');
outputCtx.scale(x,y);
outputCtx.rotate(radians);
outputCtx.drawImage(canvas2, 0, 0);

Depending on how you want to rotate and scale the image that is on canvas2 before drawing it to outputCanvas