I've implemented an image map using shape circles, but now I'm looking for a way to draw visible circles or icons on the map.
Is there a solution for this issue?
Currently, I have used a canvas overlay on the image to draw on it
This method worked successfully
However, the problem arises when the image is within a container div with the overflow hidden property applied. This causes issues with zooming in and out as parts of the image are hidden.
With the canvas element, I faced challenges trying to maintain the overflow hidden behavior. When positioning the canvas absolutely, the overflow hidden property didn't work as expected. On the other hand, setting the position relative caused the image below the canvas to disappear.
A JavaScript function called drawCir has been created to draw circles based on coordinates provided.
The myInit function initializes the canvas and sets up the drawing context.
It calculates the position and size of the target image and places the canvas over the image.
The canvas is styled to be transparent to mouse events and positioned absolutely above the image.
The color and width properties for fill and stroke operations are also set.
Then, each area element within the image map is iterated through to draw circles on the canvas based on their coordinates.#myCanvas
{
pointer-events: none;
position:absolute;
}
#con{
overflow: hidden;
height: 600px;
width: 100%;
}
#img{
width:100%;
height:100%;
position:relative;
}<div id="con">
<canvas id="myCanvas"></canvas>
<img src="images/img.png" alt="" id="img" usemap="#img_map">
<map name="img_map"><area shape=circle>......</map>
</div>
//fucntion to draw called in body tag