passing image src to onclick

I am executing the following script in order to convert an image into grayscale using Javascript.

<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
  function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
    }

    // overwrite original image
    context.putImageData(imageData, x, y);

  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);

  };
  imageObj.src = 'text.png';
</script>

Whenever i change the imageObj.src, my browser displays the indicated image in grayscale. However, what I want is to only display the converted image when i click on some sort of button. Given that my image was uploaded at the beginning of the script.

I tried

<button onclick="drawimage(uploadedFile)">Here</button>

It ovbiously didn't work. I also want to use the new converted image in the rest of my code (store it in some sort of variable) and still couldnt figure out a way to do it. Thank you for helping me out !

Solution

Try this, Here is a live version https://jsbin.com/relokugumo/1/edit?html,js,output

Html To

<canvas id="myCanvas" width="578" height="400"></canvas>
<button onclick="setImage('<?php echo $uploadefile ?>')">Here</button>

And JS To,

function setImage(imagePath){
  var imageObj = new Image();
  imageObj.src = imagePath;
  drawImage(imageObj);
}

function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

    for(var i = 0; i < data.length; i += 4) {
      var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
      // red
      data[i] = brightness;
      // green
      data[i + 1] = brightness;
      // blue
      data[i + 2] = brightness;
    }

    // overwrite original image
    context.putImageData(imageData, x, y);

  }