HTML canvas collision adjusting hitbox - html

Question

Hello first time asking a question and I would appreciate any help as I code just for fun. I'm making a simple game in canvas and need help to adjust the hitbox on two objects. I read several other threads that touch on the subject but couldn't find one that answers my question.
Example of what is happening
As seen from the image the hitbox of the smiley face extends beyond the actual image that is drawn. The actual image in the game will be more complex than a smiley face. However using the bounding box method does not account for what the user does not see so on screen, as the images do not look like they are colliding but in reality they are. I thought of trying to clip the image by drawing a triangle within the hitbox and then doing some calculations based on the area. This is what I came up with so far.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var player = {
x: 0,
y: 0,
width: 100,
height: 100
}
var obstacle = {
x: 150,
y: 100,
width: 100,
height: 100
};
document.addEventListener("keydown", keyDownHandler);
function keyDownHandler(e) {
ctx.clearRect(0,0,canvas.width,canvas.height);
if(e.keyCode === 37) {
player.x -= 10;
}
else if(e.keyCode === 38) {
player.y -= 10;
}
else if(e.keyCode === 39) {
player.x += 10;
}
else if(e.keyCode === 40) {
player.y += 10;
}
function drawTriangle(){
ctx.beginPath();
ctx.moveTo(player.x+player.width,player.y+player.height-40);
ctx.lineTo(player.x+player.width-40,player.y+player.height);
ctx.lineTo(player.x+player.width,player.y+player.height);
ctx.closePath();
ctx.fillStyle="orange";
ctx.fill();
}
function drawObstacle(){
ctx.beginPath();
ctx.fillRect(obstacle.x,obstacle.y,obstacle.width,obstacle.height);
ctx.closePath();
}
function colorChange(){
var color = "black";
var triArea = (player.y+player.height-40)*(player.x+player.width-40)/2;
if(player.x+player.width >= obstacle.x &&
player.x <= obstacle.x+obstacle.width &&
player.y <= obstacle.y+obstacle.height &&
player.y+player.height >= obstacle.y){
if(triArea <= 5500 && triArea != 5250){
color = "red";
}
else {
color = "green";
}
document.getElementById("playerArea").innerHTML = ((player.x+player.width)*(player.y+player.height));
document.getElementById("triangleArea").innerHTML = triArea;
}
else{
color = "black";
}
ctx.fillStyle = color;
}
ctx.strokeRect(player.x,player.y,player.width,player.height);
colorChange();
drawObstacle();
ctx.closePath();
drawTriangle();
}
https://codepen.io/brucelin82/pen/aqQLxW?editors=1010
The obstacle will change to red if a collision has occurred but not past the triangle. Once the collision extends beyond the triangle the obstacle will turn to green. The code is still a work in progress but I was just wondering if I'm on the right track or if there is an easier method to account for the empty space within the image. Thank you in advance for any direction you can give me.