Canvas test

<!DOCTYPE html>
<html>
<body>
<style>
#scream {
	width: 500px;
  height: 300px;
}
#mydiv {
	width: 400px;
  height: 200px;
}
#mydiv2 {
	width: 500px;
  height: 500px;
  overflow: auto;
}
#myCanvas {
	width: 350px;
  height: 150px;
  border: 1px solid #d3d3d3;
}
#myCanvas2 {
	width: 500px;
  height: 300px;
}
</style>
<p>Image to use:</p>
<img id="scream" src="https://www.w3schools.com/tags/img_the_scream.jpg" alt="The Scream">

<p>Canvas:</p>
<div id="mydiv">
  <canvas id="myCanvas">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
  <p>notice the bottom is cut off.</p>
</div>
<div id="mydiv2">
<canvas id="myCanvas2">
  Your browser does not support the HTML5 canvas tag.
</canvas>
</div>
<script>
window.onload = function() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0, 300, 300);
    var d = document.getElementById("myCanvas2");
    var ctx = d.getContext("2d");
    var img = document.getElementById("scream");
    ctx.drawImage(img, 0, 0, 300, 150);
}
</script>

</body>
</html>