<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
}
canvas{
display: block;
background: #c1c1c1;
margin: 80px auto;
}
img{
display: none;
}
</style>
</head>
<body>
<img src="img/img.jpg" width='200';/>
<canvas width="500" height="500" ></canvas>
<script>
οnlοad=function(){
var oC = document.querySelector('canvas');
var op = oC.getContext('2d');
var oImg = document.querySelector('img');
op.drawImage(oImg,100,0,100,100,200,0,100,100)
}
</script>
</body>
</html>