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 canvas = document.getElementById(id); console.log(canvas); if (canvas.getContext) { var context = canvas.getContext('2d'); var img = new Image(); img.src = 'https://google.com/xyz.jpg'; img.onload = function () { context.save(); context.rect(10, 2, 10, 10); 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!