<div class="container">
  <img id="SourceImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/58/Brill_windmill_April_2017.jpg/635px-Brill_windmill_April_2017.jpg">

  <div class="video-container">
    <canvas id="Canvas" class="video"></canvas>
  </div>
</div>
<button id="PaintButton">Paint Canvas</button>

.container {
  display: flex;
}

.video-container {
  width: 400px;
  
  video, canvas {
    max-width: 100%;
  }
}

var canvas;
var context;
var paintButton;

function init() {
  var image = document.getElementById('SourceImage');
  paintButton = document.getElementById('PaintButton');
  canvas = document.getElementById('Canvas');
  context = canvas.getContext('2d');

  paintButton.addEventListener('click', function () {
    drawImage(image);
    // Or
    // var image = new Image();
    // image.onload = function () {
    //    drawImage(image);
    // }
    // image.src = 'image.jpg';
  });
}

function drawImage(image) {
  // Set the canvas the same width and height of the image
  canvas.width = image.width;
  canvas.height = image.height;

  context.drawImage(image, 0, 0);
}

window.addEventListener('load', init);