#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2

    Unhappy 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..
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    119
    Rep Power
    33
    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.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,127
    Rep Power
    4304
    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

    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.

    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).
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    Okay.
    That really makes sense.

    A reference = A ID or Classes.

    Context = Type of Drawing.

    Thank you!


    Originally Posted by simplypixie
    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.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    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??



    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.
  10. #6
  11. JavaScript is not spelt java
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2011
    Location
    Landan, England
    Posts
    743
    Rep Power
    165
    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
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    2
    Yeah, I meant that an ID is used as a reference.

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


    Originally Posted by AndrewSW
    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];

IMN logo majestic logo threadwatch logo seochat tools logo