Hey I have recently started to learn canvas in html5. As of now I can draw all the basic shapes rectangles arcs etc. I am also able to get the mouse coordinates and show them in a text box in the main body of the html. I am just wondering how do I implement the coordinates I got using clientX and clientY into my canvas script so I can draw freely?.
ZeroEddy 0 Newbie Poster
ZeroEddy 0 Newbie Poster
Below is my attempt at trying to get the coordinates of the mouse and implement it into my canvas. It doesent seem to be working. Anyone have any ideas?
I am only starting to get into javascript so any help will do.
Edmond
<html>
<head>
<style type ="text/css">
body
{
background-color:yellow;
}
#myCanvas
{
background-color:white;
}
</style>
<script type="text/javascript">
function init(e,obj)
{
canvasObj = document.getElementById('myCanvas');
if(canvasObj.getContext)
{
context = canvasObj.getContext('2d');
context.moveTo (posx,posy);
context.lineTo (posx,posy);
context.stroke();
}
}
function handler(e)
{
if(!e)
var e = window.event;
var posx = 0;
var posy = 0;
if(e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if(e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
}
function findPos(obj)
{
var curleft = curtop = 0;
if(obj.offsetParent)
{
do
{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
while(obj = obj.offsetParent)
return [curleft,curtop];
}
}
window.onload = init,handler(e),findPos(obj);
</script>
</head>
<body>
<div id = "cDiv">
<canvas id ="myCanvas" width="500" height="300" >
<p>Your browser does not support canvas</p>
</canvas>
</div>
</body>
</html> Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.