HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript

HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript

Script: In this video lesson series you can learn all about how to draw into the HTML5 canvas tag using Javascrip…

Don’t forget to check out our other video tutorials or share this video with a friend.

1 Star2 Stars3 Stars4 Stars5 Stars 0 votes
Loading... 2,997 views

19 responses to “HTML5 Canvas Tag Tutorial Learn to Draw and Animate Using Javascript”

  1. Adrián Peña Miranda says:

    Adam Khoury thanks for sharing your knowledge!
    Please teach us how to program drag and drop, as you show 5:30

  2. Diganta Ray says:

    U r best in the world teacher

  3. zuber ahmed says:

    Muchas Gracias por tus videos

  4. Andy Wicks says:

    This is well thought out and well presented – thank you. Thumbs up from

  5. Maddie L says:

    you sound like oscar from the office

  6. Mostafa MASLOUHI says:

    Thank you a lot. This clear and direct

  7. Joshua Schafer says:

    I like how you simply explained the purpose of ‘document.getElementById’.
    However, you skipped right over ‘canvas.getContext’ and now i’m left in the
    dark about what it does and why.

  8. Peristilo peris says:

    why plan? explan, please!

  9. DAVID DAVOYAN says:


  10. Alejandro Garcia says:

    i’ve seen that people put some buttons with some kind of transparency of
    something on their videos here on youtube… would be great if you add some
    kind of button on the video, to jump to the next video of the series, cause
    I can not figure out how to go to the next one :S

  11. Joe Simmons says:

    Your problem is on line 9. You call getElementByID, but the capitalization
    is incorrect. It needs to be “Id” not “ID” Replace the line with: var
    canvas = document.getElementById(“canvas1”); And always check your error

  12. Ninad Chaudhari says:


  13. tennowman says:

    This is awesome. (before watching this) I thought about making functions
    that echo out (using php instead of js) divs with colored background, but
    yeah, this is way better 😀

  14. anzatzi says:

    great lead in to this topic. anyone really doing anything with this

  15. TopShelfization says:

    underneath the function definition… within the script tags that youtube
    is refusing to allow me to post.. …. function draw(){ //stuff }// after
    this draw(); // put this here, this should work.. …..

  16. Sultan Mehmood says:

    hi, i write exact your code but its show me black box in firefox and green
    on chrome what’s going wrong… here is the code… // Assign our canvas
    element to variable var canvas = document.getElementById(“canvas”); //
    Create the HTML5 context object to enable draw methods var ctx =
    canvas.getContext(“2d”); // fillStyle(r,g,b,alpha); ctx.fillStyle =
    “rgba(0,200,0,1);” // fillRect(X,Y,width,height); ctx.fillRect(36,10,22,22);

  17. Timothy Basaldua says:

    Five Stars. Great voice. Great selection lesson. Minimal talking. Maximum
    teaching Thanks you.

  18. Mathias Barefeet says:

    Looking forward for this series!

  19. Chun Yang says:

    I like your voice!

Leave a Reply

Your email address will not be published.