8-1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>8-1</title>
  <base href="./images/" target="_blank">
  <style>
      :root{
         --main-bg-color:white;


      }
      div#div1{
          width:calc( 100% - 100px );
          height: 100%;
          margin:0 auto;
          background: var(--main-bg-color);
      }

         
	</style>


</head>
<body>

<div id="div1">
   <img id="img1" src="1122.jpg" alt="1122.jpg" width="300px" />
   <canvas id="can1" width="400px" height="400px" style="background: white;border:1px solid black;">

   </canvas>

</div>


<script>

var c = document.getElementById('can1');
var ctx=c.getContext("2d");
var img=document.getElementById("img1");
img.onload=function(){
     ctx.drawImage(img,10,10,300,500);
}

</script>
	
</body>
</html>