Html5 Canvas coordinates

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

Newbie Poster

16 posts since Oct 2011

Reputation Points: 10

Solved Threads: 0

7 Months Ago

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>

ZeroEddy

Newbie Poster

16 posts since Oct 2011

Reputation Points: 10

Solved Threads: 0

This article has been dead for over three months

You