Add snippets for mouse canvas events

Author: yikjunma

content/en/snippets/mouse/canvas_mouse_event.md

@@ -0,0 +1,44 @@
+---
+title: "Canvas mouse event"
+weight: 80
+ie_support: true
+---
+
+Use this snippet to click on an area within a canvas element.
+
+Replace the values in the code as needed.
+
+```js
+// Replace this with your desired CSS selector
+var selector = "Selector here";
+
+// Find the element
+var element = document.querySelector(selector);
+
+if (!element) {
+  throw new Error("Error: cannot find the element with selector (" + selector + ").");
+}
+
+// Get the element's position and size
+var rect = element.getBoundingClientRect();
+
+// Change this to the xy click coordinates you need to target
+var clickX = rect.left + rect.width / 4;
+var clickY = rect.top + rect.height / 4;
+
+// List of mouse events to dispatch
+// Remove the mouse events that are not relevant 
+var mouseEvents = ['mouseover', 'mouseenter', 'mousedown', 'mouseup', 'click', 'dblclick', 'mouseout'];
+
+// Dispatch each event
+mouseEvents.forEach(function(eventType) {
+  var event = new MouseEvent(eventType, {
+    bubbles: true,
+    cancelable: true,
+    clientX: clickX,
+    clientY: clickY
+  });
+
+  element.dispatchEvent(event);
+});
+```

content/ja/snippets/mouse/canvas_mouse_event.md

@@ -0,0 +1,45 @@
+---
+title: "キャンバスのマウスイベント"
+weight: 80
+ie_support: true
+---
+
+このスニペットを使用して、`canvas` 要素内の特定の領域をクリックできます。
+
+必要に応じてコード内の値を変更してください。
+
+
+```js
+// 使用したい CSS セレクターをここに指定します
+var selector = "Selector here";
+
+// 要素を取得
+var element = document.querySelector(selector);
+
+if (!element) {
+  throw new Error("Error: cannot find the element with selector (" + selector + ").");
+}
+
+// 要素の位置とサイズを取得
+var rect = element.getBoundingClientRect();
+
+// 対象としたいクリック位置の座標を指定（ここでは要素の1/4の位置）
+var clickX = rect.left + rect.width / 4;
+var clickY = rect.top + rect.height / 4;
+
+// 発火させるマウスイベントの一覧
+// 不要なマウスイベントは削除してください 
+var mouseEvents = ['mouseover', 'mouseenter', 'mousedown', 'mouseup', 'click', 'dblclick', 'mouseout'];
+
+// 各イベントを順に発火させる
+mouseEvents.forEach(function(eventType) {
+  var event = new MouseEvent(eventType, {
+    bubbles: true,
+    cancelable: true,
+    clientX: clickX,
+    clientY: clickY
+  });
+
+  element.dispatchEvent(event);
+});
+```