<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>
<h2>Original image</h2>
<img id="flower" src="https://images.unsplash.com/photo-1485431142439-206ba3a9383e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="500" height="379">
</div>
<h2>Draw an image with canvas</h2>
<canvas id="exampleCanvas"></canvas>
<script>
const canvas = document.getElementById('exampleCanvas');
const ctx = canvas.getContext('2d');
const image = document.getElementById('flower');
image.addEventListener('load', e => {
ctx.drawImage(image, 80, 80, 350, 200, 10, 10, 150, 100);
});
</script>
</body>
</html>