Learn HTML canvas by coding a JavaScript game | HTML Canvas tutorial for beginners

In this tutorial, we create a JavaScript game with HTML Canvas. First, we go through in detail, how to draw a balloon on the canvas. We cover the basics of drawing, and even quadratic bezier curves and arcs. Then as a second example, we draw trees based on randomly generated parameters. Then we talk about positioning these elements on the canvas and build up our game. We add some game logic, event handling, and animation. And finally, we add a very basic hit detection to our game.

This tutorial is for beginners. If you are new to web development and want to learn how to develop games and other fun stuff, please subscribe to my channel.

0:00 Introduction
0:58 Drawing an air balloon
6:51 Drawing trees
10:53 Positioning shapes
16:02 Event handling and animation
21:15 Hit detection
23:12 Next steps

#javascript #canvas #game #webdevelopment #codepen

[eddiewang]

tysm, you have no clue how much this helped. I'm a middle schooler who's looking how to code. I can't believe there's someone who realesing all this stuff for free. I'm to poor to afford paided courses. thank you so MUCH. i subbed btw!!!! You have to admit this is good content. At least you helped TYSM

[RCOA]

Another Masterpiece! I'll study this later, keep up the good work!

[Radu]

Great! I especially like how you use scripted animations to explain everything.

[taqikhan]

Amazing. Helped a lot, thank you very much.😍

[unknown-bxmy]

Your tutoriol is awesome.
I am sure you take long time to montage the video.
Thank you😊.

[hekermen]

I want to learn this all and show this as my graphics project for school but when i simply copy the code and try to launch it in browser using live server it just shows blank space
how do i make it run? how do i do it?

[iwontreplybacklol]

As soon as I wrote down the code for the draw() function, it doesnt work. I copied it exactly. I was able to translate the numbers for the balloon with 0, 0 at the top left and draw it on the canvas that way, but as soon as I put in your balloon draw values and your draw() function code exactly as it is written, i get nothing but a blank screen. What gives.

[KLead]

Why when I write the codes with you, nothing happen on the browser but when I copy paste your codes from your page then it works! So confusing, but thanks anyway.

[TwoBrosCubing-ojzl]

What type of file is this (.html, .jv, .ctx, .css)?

[mortkebab]

My problem with your approach is that I don't like the codepen environment and I cannot get in my preferred development environment (VS Code and a browser) what you are showing. For example, at 6:50 you have some js code on the left and a balloon on the right. It is completely useless for the purpose of following along, since I don't know how to get that view. Basically, your final result is great but your teaching format is completely at odds with my learning style, where I need to do the step myself startng with somethging simple and building up. Just sitting and listening to your explanation doesn't teach me anything I can use.