Question

How to use drawImage() to draw an image on the canvas in JavaScript

Answer 1

<canvas id="canvas"></canvas>
<div style="display:none;">
  <img id="pic" src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227">
</div>  

<script type="text/JavaScript">   

// void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
           
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var image = document.getElementById("pic");

ctx.drawImage(image, 33, 71, 104, 124, 21, 20, 87, 104);

</script>

 

70+ SQL courses for beginners and professionals