HTML img to Canvas

<canvas id="myCanvas" width="2048px" height="2048px">

</canvas>

<div style="margin-top:50px">
    <input id="imageFile" type="file">
</div>
<div style="margin-top:50px">
    <input type="button" value="Resize Image" id="resize"/>
</div>
<div style="margin-top:50px">
    <img src="" id="output" style="width:100%">
</div>
<div style="margin-top:50px">
    <input type="button" value="toCanvas" id="toCanvas"/>
</div>

 toCanvas.addEventListener('click', function toCanvas() {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    console.log('ctx::::::::::', ctx);
    var img = document.getElementById("output");
    ctx.drawImage(img, 0, 0, c.width, c.height); 
   //4 , 5번 인자는 <canvas id="myCanvas" width="2048px" height="2048px">

// </canvas> 태그에 있는 width height 를 할당해줄수있다.
    });

refer : https://www.w3schools.com/tags/canvas_drawimage.asp