[Js] Canvas Coordinates
5 posts
Page 1 of 1
Quick Profile
Information
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am View Full Profile
Hello,
Here is another JavaScript tutorial. The tutorial uses the new HTML5 tag "Canvas" and is used to draw graphics via JavaScript. It can be used for heaps more if you have a good imagination though! Such as games since it can pick up user input and animations.
(Note: In the picture the cursor isn't shown.)
This tutorial shows the x and y coordinates when you move the mouse inside the canvas. This is helpful for when you're trying to draw in the canvas and don't know where things should because you don't know the coordinates.
First off we need three files. I use notepad++ to do this but you can do this is whatever you want whether it be notepad or dreamweaver or anything else. Create a file named index.html, style.css and canvas.js.
HTML:
<!DOCTYPE html> is HTML5 declaration. This just tells the browser which version of HTML we're using basically. I am not going to explain everything but since most people still use 4.0.1 I would show that HTML5 uses THAT declaration. Meta charset tells the browser which encoding we're using for text. link rel is just linking to our stylesheet. We have a script that links to our canvas.js file.
Then we have our actual canvas element. We set the id to coordinatesCanvas which is what we will be naming it in our style sheet. We set the width and height on the canvas to 500 pixels, margin to 100px, and has two events.
onmousemove This event is triggered when the user moves the mouse but note it is only called when the mouse is moved INSIDE of the canvas because that's where the event was placed and when the event is called it calls the cnvs_getCoordinates function from our javascript file
onmouseout when the mouse is moved out we call another function from the javascript file called cnvs_clearCoordinates.
When we close up our canvas we add a div with the id of: xycoordinates, we use this to display the coordinates.
CSS:
JavaScript:
This function has three lines. The first line sets x to the clients x (the mouse) and the second sets the position of y. The third lines uses document.getElementById the document is the web page, getElementById which grabs the element that has the id "xycoordinates" and if you remember that is our div tag. It sets the html of that div to say the word Coordinates: then shows the x and y position. + x + is the x position and + y + is the y position.
The second function is called when the user moves the mouse out of the canvas and just removes everything from the div. If you don't want this just remove the function.
The files of this tutorial can be downloaded below, if you need more help say so and I will be more than happy to help! if you want to request a tutorial feel free to do so.
Here is another JavaScript tutorial. The tutorial uses the new HTML5 tag "Canvas" and is used to draw graphics via JavaScript. It can be used for heaps more if you have a good imagination though! Such as games since it can pick up user input and animations.
(Note: In the picture the cursor isn't shown.)
This tutorial shows the x and y coordinates when you move the mouse inside the canvas. This is helpful for when you're trying to draw in the canvas and don't know where things should because you don't know the coordinates.
First off we need three files. I use notepad++ to do this but you can do this is whatever you want whether it be notepad or dreamweaver or anything else. Create a file named index.html, style.css and canvas.js.
HTML:
Code: Select all
Okay. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="canvas.js"></script>
<title>Canvas Coordinates Tutorial</title>
</head>
<body>
<canvas id="coordinatesCanvas" width="500" height="500" style="margin:100px;" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">
</canvas>
<div id="xycoordinates">Coordinates: (0, 0)</div>
</body>
</html>
<!DOCTYPE html> is HTML5 declaration. This just tells the browser which version of HTML we're using basically. I am not going to explain everything but since most people still use 4.0.1 I would show that HTML5 uses THAT declaration. Meta charset tells the browser which encoding we're using for text. link rel is just linking to our stylesheet. We have a script that links to our canvas.js file.
Then we have our actual canvas element. We set the id to coordinatesCanvas which is what we will be naming it in our style sheet. We set the width and height on the canvas to 500 pixels, margin to 100px, and has two events.
onmousemove This event is triggered when the user moves the mouse but note it is only called when the mouse is moved INSIDE of the canvas because that's where the event was placed and when the event is called it calls the cnvs_getCoordinates function from our javascript file
onmouseout when the mouse is moved out we call another function from the javascript file called cnvs_clearCoordinates.
When we close up our canvas we add a div with the id of: xycoordinates, we use this to display the coordinates.
CSS:
Code: Select all
We don't have much for our style sheet. We have an id that the canvas uses and just sets the canvas's border to 1px thick, a solid border and sets the colour of the border to #ccc. #coordinatesCanvas
{
border:1px solid #ccc;
}
JavaScript:
Code: Select all
In our JavaScript file we have two functions. The first one is called cnvs_getCoordinates(e) (short for canvas) function cnvs_getCoordinates(e)
{
x=e.clientX-108;
y=e.clientY-108;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
This function has three lines. The first line sets x to the clients x (the mouse) and the second sets the position of y. The third lines uses document.getElementById the document is the web page, getElementById which grabs the element that has the id "xycoordinates" and if you remember that is our div tag. It sets the html of that div to say the word Coordinates: then shows the x and y position. + x + is the x position and + y + is the y position.
The second function is called when the user moves the mouse out of the canvas and just removes everything from the div. If you don't want this just remove the function.
The files of this tutorial can be downloaded below, if you need more help say so and I will be more than happy to help! if you want to request a tutorial feel free to do so.
You do not have the required permissions to view the files attached to this post.
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
Quick Profile
Information
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am View Full Profile
nice tutorial 
cody theres a bug the username tag(#) works inside code tag too 
cody theres a bug the username tag(#) works inside code tag too Find my programs on Softpedia
Quick Profile
Information
Posts: 156
Joined: Mon Apr 16, 2012 3:13 pm View Full Profile
#smashapps, Great tutorial again =D
Quick Profile
Information
Posts: 2585
Joined: Mon Apr 26, 2010 6:51 pm View Full Profile
It is worth mentioning you can also use these mouse events with other HTML elements.
Quick Profile
Information
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am View Full Profile
Thanks I didn't mention that but you're right. You can add mouse events on anything.
More information on HTML events can be found be here: http://www.w3schools.com/tags/ref_eventattributes.asp
More information on HTML events can be found be here: http://www.w3schools.com/tags/ref_eventattributes.asp
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
5 posts
Page 1 of 1
Copyright Information
Copyright © Codenstuff.com 2020 - 2023