SOURCE

console 命令行工具 X clear

                    
>
console
function draw(){
    const ctx = document.getElementById('canvas').getContext('2d')
    ctx.drawImage(document.getElementById('source'), 30,40,200,300,10,10,100,210)
    ctx.drawImage(document.getElementById('frame'),0,0)
}


draw()
<html>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
   <div style="display:none">
     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
   </div>
 </body>
</html>