How to place image outside the canvas, but on the same page, on the canvas

[osaita]

Hi there,
I am trying to get images onto an HTML5 canvas. The images are on the same page in a sidebar panel getting loaded in through php.
If you click on an image on the sidebar, I want it to appear on the canvas. I am learning jquery, but I do not understand it yet....
Can anyone help out? Here is a part of the html code:

<button class="panel">Section 1</button>
      <div class="inhoud">
        <?php
        global $ConnectingDB;
        $sql = "SELECT * FROM decorations ORDER BY id desc";
        $stmt = $ConnectingDB->query($sql);
        $Sr = 0;
        while ($DataRows = $stmt->fetch()) {
          $Image            = $DataRows["image"];
           ?>
        <img src="uploads/<?php echo htmlentities($Image); ?>" class="deco">
          <?php } ?>
      </div>
        <button class="panel">Section 2</button>
          <div class="inhoud">
            <p> </p>
          </div>
    </div>
     <!-- canvas area -->

      <canvas width="1000px" height="500px"></canvas>

  Basic jquery:


function draw() {
  var image = document.getElementsByClassName("deco");
  var canvas = document.querySelector("canvas");

  var ctx = canvas.getContext("2d");

  ctx.drawImage(image, 0, 0)
}