SOURCE

let isShy = false;

const canvas = document.getElementById('canvas')

function draw(){
    const ctx = document.getElementById('canvas').getContext('2d')
    ctx.clearRect(0,0,500,500)
    ctx.beginPath()
    ctx.moveTo(50,100)
    ctx.lineTo(200,300)
    ctx.stroke()
    ctx.closePath()
    ctx.moveTo(50,100)
    ctx.lineTo(50,200)
    ctx.lineTo(200,0)
    ctx.stroke()
    ctx.arc(200,150,150,-Math.PI/2,Math.PI/2)
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(250, 100, 30, 0, Math.PI*2)
    ctx.fillStyle = '#fff'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(260, 90, 15, 0, Math.PI*2)
    ctx.fillStyle = '#000'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(260, 160, 50, 0, Math.PI/2)
    ctx.stroke()
    ctx.closePath()
    if(isShy){
        shy(ctx)
    }
    requestAnimationFrame(draw)
}

function shy(ctx){
    ctx.beginPath()
    const gradient = ctx.createRadialGradient(200,200,10,200,200,50)
    gradient.addColorStop(0,'rgba(238,89,89,0.8)')
    gradient.addColorStop(0.3,'rgba(223,107,67,0.8)')
    gradient.addColorStop(1,'rgba(232,152,122,0.8)')
    ctx.fillStyle = gradient;
    ctx.arc(200,200,50, 0, Math.PI*2)
    ctx.fill()
    ctx.closePath()
}

canvas.addEventListener('mouseover', ()=>{
    isShy = true;
})
canvas.addEventListener('mouseleave', ()=>{
    isShy = false;

})

requestAnimationFrame(draw)

<div class="container">
    <canvas id="canvas" width="500" height="500"></canvas>
</div>