// void ctx.drawImage(image, dx, dy);
// void ctx.drawImage(image, dx, dy, dWidth, dHeight);
// void ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

// image
//     Элемент для отображения в контексте.
//     Функция принимает любой источник изображения, пригодный для отображения
//     на холсте
// dx
//     Координата по оси Х, обозначающая стартовую точку холста-приёмника,
//     в которую будет помещён верхний левый угол исходного image.
// dy
//     Координата по оси Y, обозначающая стартовую точку холста-приёмника,
//     в которую будет помещён верхний левый угол исходного image.
// dWidth
//     Ширина изображения, полученного из исходного image.
//     Эта опция позволяет масштабировать изображение по ширине.
//     Если опция не задана, изображение не будет масштабировано.
// dHeight
//     Высота изображения, полученного из исходного image.
//     Эта опция позволяет масштабировать изображение по высоте.
//     Если опция не задана, изображение не будет масштабировано.
// sx
//     Координата по оси X верхнего левого угла фрагмента,
//     который будет вырезан из изображения-источника и помещён в контекст-приёмник.
// sy
//     Координата по оси Y верхнего левого угла фрагмента,
//     который будет вырезан из изображения-источника и помещён в контекст-приёмник.
// sWidth
//     Ширина фрагмента, который будет вырезан из изображения источника
//     и помещён в контекст-приёмник. Если не задана, фрагмент от точки,
//     заданной sx и sy до правого нижнего угла источника
//     будет целиком скопирован в контекст-приёмник.
// sHeight
//     Высота фрагмента, который будет вырезан из изображения источника
//     и помещён в контекст-приёмник.

function Draw() {
  let canvas = document.getElementById('canvas');
  let ctx = canvas.getContext('2d');
  let image = document.getElementById('source');

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