<canvas id="myCanvas"></canvas>
body {
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
 }

canvas {
     border: 3px solid black;
 }
View Compiled
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
canvas.width = 600;
canvas.height = 400;

// 
let immagine = new Image();
immagine.src = 'https://source.unsplash.com/hQ4BQ3wdHsQ/600x400';
immagine.addEventListener('load', () => {
//ctx.drawImage(immagine ,rX, rY, rL, rA, x, y, l, a)
  ctx.drawImage(immagine, 220, 140, 140, 110, 50, 20, 100, 80 )
}, false);

let dogs = new Image();
dogs.src = 'https://i.ibb.co/WWLqNB9/portrait-collection-adorable-puppies.jpg';
dogs.addEventListener('load', () => {
  let w = dogs.width;
  let h = dogs.height;
  ctx.drawImage(dogs, 0, 0, w / 2, h / 2, 50, 150, w / 3, h/ 3 );
  ctx.drawImage(dogs, w / 2, 0, w / 2, h / 2, 210, 10, w / 3, h/ 3 );
  ctx.drawImage(dogs, w / 2, h / 2, w / 2, h / 2, 350, 150, w / 3, h/ 3 );
}, false);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.