0

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?.

1
Contributor
1
Reply
3
Views
6 Years
Discussion Span
Last Post by ZeroEddy
0

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>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.