Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 4

Posted by Sunny Singh
Sunny Singh
1,148 Points

Help-I don't really understand the HTML5 canvas part of this tutorial.On another note is there a course teaching HTML5 ?

I don't really get this. Can some one explain in a simple way

var context = $("canvas")[0].getContext("2d");

or this for that matter

context.beginPath();
context.moveTo(10,10);
context.lineTo(20,10);
context.lineTo(20,20);
context.lineTo(10,20);
context.closePath()

context.stroke();

Also is there a course teaching HTML5 stuff like canvas etc... I am not sure and I don't think it's part of the regular HTML course.

1 Answer

Gary Calhoun
Gary Calhoun
10,317 Points
Gary Calhoun
Gary Calhoun
10,317 Points

Ok so basically the HTML5 canvas element is used to draw graphics on a web page. The variable can be anything in this example its "context", but it could be sunny.MoveTo(10,10). So the 10,10 is the x and y coordinates. X is goes horizontal(left and right) and Y goes vertical (up and down).

I don't know if you can go negative numbers for MoveTo method but I know in the bezier curve you can do negatives in that, if you can though then move x 10 or you can move x -10 that will affect it going left or right You can move y 10 or -10 that will affect it going up and down. I think it starts drawing from the upper left corner though if I am not mistaken.

Here is a visualization of the coordinates system its pretty common in 2d and 3d applications actually. http://www.ux1.eiu.edu/~cfadd/1150/03Vct2D/Images/axes2.gif

The MoveTo Method http://www.w3schools.com/tags/canvas_moveto.asp

Here are some other courses on treehouse.

http://teamtreehouse.com/library/coding-your-first-html5-game

http://teamtreehouse.com/library/html5-mobile-web-applications

Let me know if you have any other questions

Sunny Singh
Sunny Singh
1,148 Points

thanks I understand some what better now