Hi,
lets say I have html file with 'canvas' element and I'd like to know the mouse position over this canvas. So far the html looks like:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Project1</title>
<script src="project1.js"></script>
<style type="text/css">
body{
padding: 1%
}
#canv1 {
position : fixed;
left: 30px;
border:1px solid #000000;
box-shadow: 5px 10px 10px #888888;
top : 300px;
}
</style>
</head>
<body>
<div id="parag1">
<p id="p1"></p>
</div>
<canvas id="canv1" width="400" height="300"></canvas>
<script>
rtl.run();
</script>
</body>
</html>
and the pas2js code:
program project1;
{$mode objfpc}
uses
JS, Classes, SysUtils, Web;
var
canv1 : TJSHTMLCanvasElement;
canv1_ctx : TJSCanvasRenderingContext2D;
cx, cy, x,y, r : Integer;
mouse1 : TJSMouseEvent;
event1 : TJSEvent;
procedure mouseMove;
begin
//document.getElementById('p1').innerHTML:=inttostr(round(canv1.getBoundingClientRect.x));
//str1:=floattostr(mouse1.clientX);
document.getElementById('p1').innerHTML:= //X, Y position of the mouse
end;
begin
canv1:=TJSHTMLCanvasElement(document.getElementById('canv1'));
canv1_ctx:=canv1.getContextAs2DContext('2d');
document.querySelector('#canv1').addEventListener('mousemove', @mouseMove);
end.
I don't want to use WCL elements from Lazarus this time. Maybe it is simple to solve but I'm stuck.. Simply saying I don't know how to use TJSMouseEvent, or maybe TJSEvent to grab mouse position??
Recent
