javascript 画像へのusemap属性付与

画像（地図）の上に目印（赤丸）を描画して
その赤丸をクリックするとリンクページへジャンプするようにしたいです。

いま、CANVASタグにて画像の上に赤丸を書くことはできましたが、下の方で書いているクリックエリア設定が機能せずに悩んでいます。

クリッカブルマップは”usemap"属性によって対象画像を判別するようなのですが
scriptにて画像を呼び出してしまっているのでusemap属性が付与できていません。属性を付与する方法はありますでしょうか？

<html> <head> <title>demo</title> </head> <body> 　//canvasタグ <canvas width="2000" height="1000" id="canvas"></canvas>

<script>

　　// MAPの表示
function init(){　
var img = new Image();
img.src = "Map.jpg";
img.onload = function(){
ctx.drawImage(img,0,0);

//赤丸表示
ctx.beginPath();
ctx.arc("200", "300", 20, 0, Math.PI*2, false);
ctx.fillStyle="red";
ctx.fill();
}
}

// 実行をセット
var ctx;
document.body.onload = function(){
ctx = document.querySelector("canvas").getContext("2d");
init();
}
</script>

//クリッカブルマップの設定
<map name="Map">
<area shape="circle" coords="200,300,20" href="http://127.0.0.1:8887/***.html">
</map>

</body> </html>

行動規範の内容に同意します

回答1件

ベストアンサー

Canvasでイベント拾って処理するほうがよいと思います。

【Canvasイベント操作まとめ - Qiita】
https://qiita.com/nekoneko-wanwan/items/9af7fb34d0fb7f9fc870

【Canvas上のオブジェクトがクリックされたか検知する | Black Everyday Company】
https://kuroeveryday.blogspot.com/2019/04/how-to-detect-click-on-shape-on-canvas.html

単純に「クリックできる赤い丸」が画像の上にあればよいのであれば、HTML/CSSで処理できると思います。（クリッカブルマップはレスポンシブ対応が面倒なので、普通にリンクを作ったほうが簡単）

HTML
1<div class="img-wrap"><img src="https://placehold.jp/24/99cc99/339933/400x200.png?text=map" alt=""><a href="#"></a></div>

CSS
1.img-wrap {
2  position: relative;
3}
4.img-wrap > img {
5  display: block;
6  width: 100%;
7}
8.img-wrap > a {
9  display: block;
10  width: 0;
11  height: 0;
12  position: absolute;
13  left: 20%;
14  top: 20%;
15  border-radius: 50%;
16  border: 20px solid red;
17  margin: -10px 0 0 -10px;
18}
19```**動くサンプル：**[https://jsfiddle.net/Lfp3s950/](https://jsfiddle.net/Lfp3s950/)