Having issues hiding/moving clues to div

[OHammerpaw]

What's the problem you're trying to solve?

I am trying to move or hide the clues when they are clicked

Post any code you think might be relevant (one fenced block per file)

`game.addEventListener('mousedown', function(e) {
    const coordinate = printMousePos(game,e);
    console.log(coordinate) 

    if((polaroidArea.x.start <= coordinate.x && coordinate.x <= polaroidArea.x.end) 
    && (polaroidArea.y.start <= coordinate.y && coordinate.y <= polaroidArea.y.end)) {
        console.log('photo area clicked')
    } else if ((featherArea.x.start <= coordinate.x && coordinate.x <= featherArea.x.end)
    && (featherArea.y.start <= coordinate.y && coordinate.y <= featherArea.y.end)) {
        feather.undetected = false
        console.log('feather area clicked')
    } else if ((tracksArea.x.start <= coordinate.x && coordinate.x <= tracksArea.x.end) 
    && (tracksArea.y.start <= coordinate.y && coordinate.y <= tracksArea.y.end)) {
        console.log('tracks area clicked')
    } else if ((bloodArea.x.start <= coordinate.x && coordinate.x <= bloodArea.x.end) 
    && (bloodArea.y.start <= coordinate.y && coordinate.y <= bloodArea.y.end)) {
        console.log('blood area clicked')

    }
})

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

No error message, I am just having trouble finding a way to accomplish this effect

What is your best guess as to the source of the problem?

I think I may have coded myself into a bit of a corner. I started with making a clue class that included the render(), but I had to use drawImage to have my images appear and it made the class kind of moot. However, now that i don't have a function class with the render() baked in, I am having trouble getting the clues to disappear onmousedown.

What things have you already tried to solve the problem?

I have tried going back and recreating the class, but I run into the same problem I had before where it doesn't work smoothly with the pictures.

Paste a link to your repository here[

](https://github.com/OHammerpaw/The-Mothman)

[OHammerpaw]

I have remedied the problem of getting clues to appear in the appropriate div boxes when mousedown event happens. Still stuck on how to get my images to disappear from canvas though.

[kestler01]

Hey Lauren, good work ! I think we should consider using the ctx.clearRect to clear the game board and redraw everything that you still need on it - maybe inelegant but should work as intended. https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/clearRect

[OHammerpaw]

Ok, I'll try that! It may be tricky to get it to work properly with a background image, but I'll try to figure it out- thank you!

[kestler01]

if you have a game loop, you can put the clear at the top of it, and then render everything each game tick, which allows us to handle multiple things moving at the same time

[OHammerpaw]

I currently don't have a game loop yet but Ill create one

[OHammerpaw]

I've got it thank you!