How do I fit a sprite to my game object

See more:

Javascript

i need to fit a piece of my spritesheet to my game object but i dont know how.

var wall
var myGamePiece;
var myObstacle;
var object1;
var objects;
var box;
function startGame() {
  //creation of objects
    wall = new component(30, 100, "black", 300, 200);
    myGamePiece = new component(30, 30, "red", 240, 135);
    myObstacle  = new component(100, 100, "green", 200, 100);    
    
//this object
    object1 =  new component(30, 30, "enemy.png", 340, 125, "image");


    box = new component(30, 30, "box.png", 177, 145, "image");
    myGameArea.start();
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 480;
        this.canvas.height = 270;
        
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);

        this.interval = setInterval(updateGameArea, 20);
      window.addEventListener('keydown', function (e) {
      myGameArea.key = e.keyCode;
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.key = false;
    })
    },
    clear : function() {
        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
  collide : function() {
    object1.x += 1;
    object1.y += 1;
  },

  //what to do when pushing box
  boxleft : function() {
    
    box.x -= 1;
    x -= 1;
    
  }
}




function component(width, height, color, x, y, type) {
    this.type = type;
    if (type == "image") {
      this.image = new Image();
      this.image.src = color;
    }
    this.sx = x;
  this.sy = y;
  this.swidth = width;
  this.sheight = height;
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
          ctx.drawImage(this.image, 
                        this.x, 
                        this.y, 
                        this.width, 
                        this.height
                      
            
          
          
          
          
          );
        } else {
        
        ctx.fillStyle = color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }    

  
  //code for gray square
this.crashWith = function(object1) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = object1.x;
    var otherright = object1.x + (object1.width);
    var othertop = object1.y;
    var otherbottom = object1.y + (object1.height);
    var crash = true;
    if ((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright)) {
      crash = false;
    }
    return crash;
  }

  
//code to push box
this.pushboxWith = function(box) {
    const myleft = this.x;
    const myright = this.x + (this.width);
    const mytop = this.y;
    const mybottom = this.y + (this.height);
    const boxleft = box.x-2;
    const boxright = box.x + (box.width)+2;
    const boxtop = box.y+2;
    const boxbottom = box.y + (box.height)-2;
    var pushboxleft = true;
    var pushboxright = true;
    
//test if pushing box
  if ((myleft < boxright) && (mybottom >= boxtop) && (mytop <= boxbottom) && (myleft > boxleft)) {
    
        pushboxleft = true;
      } else {
    
      pushboxleft = false;
      }
  
 
  return pushboxleft;
  
 
  }
}

function updateGameArea() {
  if (myGamePiece.crashWith(object1)) {
    myGameArea.collide();
  } else if (myGamePiece.pushboxWith(box)) {
    myGameArea.boxleft();
    }  else {
 
    
  myGameArea.clear();
  myGamePiece.speedX = 0;
  myGamePiece.speedY = 0;

  //keyboard controls. moves everything but the player
    if (myGameArea.key && myGameArea.key == 37) {
      myObstacle.x += 2;
     
      object1.x += 2;
      box.x += 2;
      wall.x += 2;
    }
    if (myGameArea.key && myGameArea.key == 39) {
      myObstacle.x += -2;
      
      object1.x += -2;
      box.x += -2;
      wall.x += -2;
    }
    if (myGameArea.key && myGameArea.key == 38) {
      myObstacle.y += 2;
      
      object1.y += 2;
      box.y += 2;
      wall.y += 2
    }
    if (myGameArea.key && myGameArea.key == 40) {
      myObstacle.y += -2;
      object1.y += -2;
      
      box.y += -2;
      wall.y += -2
    }

  //other square movement. disabled to isolate code.
    /*
  if (object1.x < myGamePiece.x) {
    object1.x += 1;
  }
  if (object1.x > myGamePiece.x) {
    object1.x += -1;
  }
  if (object1.y < myGamePiece.y) {
    object1.y += 1;
  }
  if (object1.y > myGamePiece.y) {
    object1.y += -1;
  }
*/
  /* object order: the object that is higher on the list
will be on top of objects lower on the list
*/


 
  myObstacle.update();
  



myGamePiece.newPos();
myGamePiece.update();
wall.update();
  object1.update();
    box.update();
  //end of list
}
}

i also used html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
  
    <script src="main.js"></script>



</body>
</html>

this is my game so far if needed.
https://eeeegame-2.octopuscat.repl.co[^]

What I have tried:

i looked all over the internet and found nothing i understood that would work with my code.
i keep finding this -

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

but dont know where or how to put it in my code