Colocar una imagen encima de un lienzo HTML que ya tiene una imagen como fondo

Creé un elemento de lienzo con un fondo de color y se me ocurrió el siguiente código para insertar una imagen encima de este lienzo:

 const canv = document.getElementById(canvasId); // the green colored canvas
 console.log(canv);
 if (canv.getContext) {
 var context = canv.getContext('2d');
 var img = new Image();
 img.src = 'https://pbs.twimg.com/media/DyhGubJX0AYjCkn.jpg';
 img.onload = function () {
 context.save();
 context.rect(100, 200, 100, 100);
 context.clip();
 context.drawImage(img, 0, 0); // image won't resize 
 context.restore();
 };
 }

Ahora, esto superpone con éxito la imagen en la parte superior del lienzo (sin embargo, está recortada), pero no puedo encontrar una manera de cambiar el tamaño de la imagen para que tenga un tamaño determinado (por ejemplo, 10x10). Intenté cambiar la penúltima línea de mi código a context.drawImage(img, 0, 0, 10, 10);pero esto rompió mi código y la imagen no se mostraría en el lienzo en este punto. ¡Cualquier ayuda sería muy apreciada!

Estaba buscando que el lienzo se viera así:

Solución del problema

Para cargar y dibujar una imagen.

const ctx = can.getContext('2d');
const img = new Image; 
img.src = 'https://pbs.twimg.com/media/DyhGubJX0AYjCkn.jpg';
img.addEventListener("load", () => {
 // draw image at 10, 10, width and height 50,50
 ctx.drawImage(img, 10, 10, 50, 50); // resizes image
}, {once: true});
 

canvas {
 background: green;
}

<canvas id="can" width="200" height = "200"></canvas>