Как я могу заставить эту функцию реагировать на метод onclick?

Question

Это кнопка, как есть, в настоящее время она получает изображение холста и отображает это изображение на другом холсте.

  var formElement2 = document.getElementById("recImage");
     formElement2.addEventListener('click', recImagePressed, false);

     function recImagePressed(e){
         var outputCanvas = document.getElementById("outputCanvas");
         var recr =  canvas2.toDataURL(); 
         outputCtx = outputCanvas.getContext('2d');
         outputCtx.drawImage(canvas2, 0, 0);
         //context2.clearRect(0, 0, canvas2.width, canvas2.height);<----***
     }  

 //***I need the image to clear when the user clicks, the above is wrong

Функция, на которую мне нужно реагировать при нажатии,: (эта функция былапротестировано и работает, если я вручную помещаю png в функцию)

function init () {  <---------this will be done away with and replaced w/ 
                              onClick ?? <-----------------****
canvas = document.getElementById('canVas');  
ctx = canvas.getContext('2d'); 
draw ();
}

function draw() {   <------This is the function that I need to react to mouse event
img = new Image();  
img.src = myPng.png ***---->This is where I need the canvas image<---------------*** 
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)));   
       }  
} 

Answer 1

formElement2.onclick = function(args, ...) {

}