HTML5 instruction doesn't make sense to me.

Dev Shed Forums Sponsor:

January 4th, 2013, 01:15 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 53

Time spent in forums: 10 h 3 m 27 sec
Reputation Power: 1

HTML5 instruction doesn't make sense to me.

Hi. I'm learning HTML5 online but have poor knowledge about IT terms. A lot of instructions doesn't make sense to me and have to take time to figure out what each term means.

But I couldn't find out what this means on google, so I'm hoping to get some help from people here who were supposed to know a lot about IT terms.

Okay, this instruction says:

1. "Retrieve a reference to the canvas element"
2. "Get the drawing context from the element using getContext()"

And I don understand what "retrieving a reference to the canvas element" means. I can't picture me retrieving a reference to an element...
I don't understand what "context" in this context either.

Could anyone please tell me what those words in this instruction mean as if you are trying to teach a 9 year old what they mean??
I don't think I have enough IT literacy..

January 4th, 2013, 02:23 AM

simplypixie

Contributing User

Join Date: Aug 2012

Posts: 104

Time spent in forums: 18 h 33 m 57 sec
Reputation Power: 11

It is not technical speak, it is just the bad way the people describe things in their tutorials.

1. Retrieve a reference to the canvas element - the reference is just the name of the id you have given to your canvas, for example (in Javascript):

Code:

var canvas = document.getElementById("myCanvas");

Where the id of your canvas area on the page is called 'myCanvas'

2. Get the drawing context from the element using getContext() - This just means the type of drawing you will have on your canvas but only '2d' is currently available at the moment anyway.

Hope this helps.

January 4th, 2013, 11:40 AM

Kravvitz

CSS & JS/DOM Adept

Dev Shed God 30th Plane (19500 - 19999 posts)

Join Date: Jul 2004

Location: USA

Posts: 19,830

Time spent in forums: 6 Months 1 Day 16 h 2 m 4 sec
Reputation Power: 4192

Quote:

the reference is just the name of the id you have given to your canvas

To clarify, a name or ID is not the same as a reference. One can be used to get a reference, but a reference is what is returned by a DOM method like document.getElementById(). A "reference" is a special kind of value that allows you to interact with elements in the page as if it were a native JavaScript Object.

__________________
Spreading knowledge, one newbie at a time. I'm available for hire at Dynamic Site Solutions.

Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

Remember people spend most of their time on other people's sites (so don't violate web design conventions).

January 7th, 2013, 06:16 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 53

Time spent in forums: 10 h 3 m 27 sec
Reputation Power: 1

Okay.
That really makes sense.

A reference = A ID or Classes.

Context = Type of Drawing.

Thank you!

Quote:

Originally Posted by simplypixie

Code:

var canvas = document.getElementById("myCanvas");

January 7th, 2013, 06:26 AM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 53

Time spent in forums: 10 h 3 m 27 sec
Reputation Power: 1

Okay. Thanks

Yeah that's really taxing for me who are not familier with JS and DOM.

So in this case, a reference is ID, right??

Quote:

Originally Posted by Kravvitz

To use <canvas> effectively you need to know the fundamentals of JavaScript and the DOM (document object model).

That's one of the odd things about HTML5: they mix the new DOM documentation right in with the HTML documentation. Previously the DOM documentation was separate. When it comes to understanding the DOM documentation in the HTML5 spec, the two most relevant DOM modules are:
http://www.w3.org/TR/DOM-Level-3-Core/core.html
http://www.w3.org/TR/DOM-Level-2-HTML/html.html

To clarify, a name or ID is not the same as a reference. One can be used to get a reference, but a reference is what is returned by a DOM method like document.getElementById(). A "reference" is a special kind of value that allows you to interact with elements in the page as if it were a native JavaScript Object.

January 7th, 2013, 08:15 PM

AndrewSW

JavaScript is not spelt java

Join Date: Feb 2011

Location: Landan, England

Posts: 743

Time spent in forums: 2 Weeks 1 Day 22 h 56 m
Reputation Power: 164

Quote:

So in this case, a reference is ID, right??

No. A web page is full of elements. If we want to manipulate an element then we usually create a variable that refers to that element. One way to refer to an element is by using its ID (if it has one). The ID itself is just a value.

Code:

<canvas id="theCanvas" width="300" height="200"></canvas>

// JavaScript code:
var refersToCanvas = document.getElementById('theCanvas');
// now we can manipulate the canvas, using the variable 
// 'refersToCanvas'
refersToCanvas.className = "newclass";

// another way, if this is the first canvas on the page:
var alsoRefers = document.getElementsByTagName('canvas')[0];

__________________
"The mysql extension is deprecated as of PHP 5.5.0, and is not recommended for writing new code as it will be removed in the future. Instead, either the mysqli or PDO_MySQL extension should be used." the docs

January 8th, 2013, 06:06 PM

Ihatephp

Contributing User

Join Date: Oct 2012

Posts: 53

Time spent in forums: 10 h 3 m 27 sec
Reputation Power: 1

Yeah, I meant that an ID is used as a reference.

To grab element, we use ID as a reference for the element, right??

Quote:

Originally Posted by AndrewSW

Code:

<canvas id="theCanvas" width="300" height="200"></canvas>

// JavaScript code:
var refersToCanvas = document.getElementById('theCanvas');
// now we can manipulate the canvas, using the variable 
// 'refersToCanvas'
refersToCanvas.className = "newclass";

// another way, if this is the first canvas on the page:
var alsoRefers = document.getElementsByTagName('canvas')[0];

HTML5 instruction doesn't make sense to me.

Developer Shed Advertisers and Affiliates