Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The drawImage() Method</h2>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p><button onclick="draw()">Tryit</button></p>
<p>Canvas:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid grey"></canvas>
<script>
function draw() {
  const c = document.getElementById("myCanvas");
  const ctx = c.getContext("2d");
  const img = document.getElementById("scream");
  ctx.drawImage(img, 10, 10, 150, 180);
}
</script>
</body>
</html>