I’m trying to render some flames however I cannot achieve a transparent canvas with putImageData(), resulting in a black canvas but well-drawn flames.

The basic idea comes from the map of a game. According to the my code review, the map is a full-page canvas. I have no problem with drawing images on canvas. My question is how to detect map houses and update the canvas or even add click ability to it.
I have attached a GIF and HTML code from the original game to better understand my request.

I’m currently developing a function plotting application using HTML Canvas and JavaScript. The application is designed to plot various mathematical functions entered by the user. It handles linear functions (like y=x and y=x+2) perfectly, rendering them correctly on the canvas.