How to capture a mouse move event of a HTML5 canvas in an Illustator panel?
Hi,
We write a plugin for Illustrator in which we want to show 3D graphics associated to a mouse position in a design. Therefore we need a HTML5 canvas in an Illustrator panel. We should also be able to manipulate the view on the 3D graphics based upon the mouse movements. We did a test and we discovered that we cannot capture the mouse move event in the canvas. Is there a solution for this?
Beneath you can see the HTML code of the panel. Strange, when we press the left mouse button the mouse move event is triggered. Nothing happens when moving the mouse. The same page on a webserver works.
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<div id='contents'>
<div id='canvasContainer'>
<canvas id='canvas-id' width='450' height='450' style="border:1px solid #0000ff;" onmousemove="myFunction(event)">
Your browser does not support the HTML5 canvas element.
</canvas>
<canvas class='tooltip' id='tooltip-id' width='200' height='25'> </canvas>
</div>
</div>
<div id='message-id'> </div>
<script id='code-js' type='text/javascript'>
//document.getElementById("canvasContainer").onmousemove = function(event) {myFunction(event)};
function myFunction(e) {
var x = e.clientX;
var y = e.clientY;
var coor = "Coordinates: (" + x + "," + y + ")";
document.getElementById("message-id").innerHTML = coor;
console.log("MOUSE MOVE");
}
</script>
</body>
</html>
AdChoices