ボタンを押すとブラウザに画像を表示できるようにする

canvas要素を指定してキャンバス上に表示したい画像を表示します。（別にcanvas要素以外の要素でも問題ありません）

canvas要素にid属性を指定して後でjavascriptで取得できるようにします。
2つのbutton要素にはonclick属性を指定して、ボタンをクリックしたときにそれぞれ関数が発火するようにします。appearメソッドを発火させたときは指定した画像を表示して、disappearメソッドを発火させたときは表示した画像を消去できるようにします。
img要素にはsrc属性に表示したい画像を設定して、id属性を指定して後で取得できるようにします。style属性には「display: none;」を指定してappear関数が発火するまで表示されないようにします。

<body>
  <canvas id="canvas" width="500" height="500"></canvas><br>
  <button onclick="appear()">表示</button>
  <button onclick="disappear()">非表示</button>
  <img src="#" id="img1" style="display: none;">
</body>

script要素内では、変数ctxを定義します。

appear関数内は定数canvasにbody内のcanvas要素を取得させ、変数ctxに代入してcanvas要素に画像を表示する準備をします。
変数imgにbody要素内のimg要素を取得させ、「drawImage( )」メソッドでキャンバスに画像を表示させます。
「drawImage(image, x, y, w, h)」メソッドはimageの部分に「img要素かvideo要素かcanvas要素」を指定できます。今回は静止画の表示なので「let img = document.getElementById("img1");」で代入したimgを指定します。xはキャンバスの左上隅からのx座標、yはキャンバス左上隅からのy座標、wは表示する画像の横幅、hは表示する画像の縦幅を指定します。
勘違いしやすいところですが、数学で学ぶ座標は中心から右に向かうとxが増え、上に向かうとyが増えますが、canvasを使うときはcanvasの左上隅が座標（0,0）で右に向かうとxが増えるのは同じですが、yは下に向かうと増えます。

disappear関数内は1行だけですが、「clearRect( )」メソッドで表示した画像を消去しています。
「clearRect(x, y , w, h)」メソッドは指定した（x, y）座標からwで指定した横幅、hで指定した縦幅分、四角形の形でクリアすることができるメソッドです。

  <script>
    let ctx;

    function appear() {
      const canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

      let img = document.getElementById("img1");
      ctx.drawImage(img, 100, 100, 300, 300);
    }

    function disappear() {
      ctx.clearRect(0, 0, 500, 500);
    }
  </script>

以下のコードをコピーして、ファイルに貼り付ければ試すことができます。（body内img要素のsrc属性の#はお持ちの画像に変更してください。drawImageメソッド内のw,hもお持ちの画像のアスペクト比に合わせて変更してください）

<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <title>image</title>

  <style>
    button {
      width: 100px;
      height: 30px;
      margin-right: 10px;
    }
  </style>

  <script>
    let ctx;

    function appear() {
      const canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");

      let img = document.getElementById("img1");
      ctx.drawImage(img, 100, 100, 300, 300);
    }

    function disappear() {
      ctx.clearRect(0, 0, 500, 500);
    }
  </script>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas><br>
  <button onclick="appear()">表示</button>
  <button onclick="disappear()">非表示</button>
  <img src="#" id="img1" style="display: none;">
</body>
</html>