## Hit Box Visualization Lesson Hit box visualization means drawing the invisible collision area that the program uses to detect contact. In games, the picture the player sees and the rectangle used for collision are not always the same size.

When collisions feel unfair or broken, drawing the hit box makes the problem visible. The developer can compare the drawn box with the sprite and adjust the size or position.

Code Runner Challenge

Hit Box Visualization Lesson

View IPYNB Source 
%%js

// CODE_RUNNER: Hit Box Visualization Lesson

function drawHitBox(ctx, object) {
  ctx.strokeStyle = "lime";
  ctx.lineWidth = 2;
  ctx.strokeRect(object.x, object.y, object.width, object.height);
}

const player = { x: 30, y: 40, width: 24, height: 48 };
drawHitBox(ctx, player);
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

The strokeRect call draws the collision rectangle without filling it in. That lets the developer see the hit box while still seeing the object underneath.