Good source for learning Canvas

Question

Hi, where can I learn canvas from 0 to 100? I've googled it but didn't find useful website(w3schools and... ,are basic), I want to learn canvas animations and those code which you can draw shapes with touching on the screen 😁

Answer 1

Sheida Hedayati I've also noticed a big gap in online resources for learning canvas animations.

I've been piecing many things together from a range of resources.

You mentioned w3schools as being basic. Have you spent time on these links:

https://www.w3schools.com/graphics/canvas_clock.asp

https://www.w3schools.com/graphics/game_intro.asp

I also really like these YouTube videos:

Chris Courses:
My favorite:
https://youtu.be/raXW5J1Te7Y

https://www.youtube.com/playlist?list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL

My own random playlist of Canvas videos:
https://www.youtube.com/playlist?list=PLZ42yDJX-zV9zgXgBuyIRJlbXdTtLjDlW

Trig Playlist for Refresher:
https://www.youtube.com/playlist?list=PLybg94GvOJ9GzztfmHCkH_5e6TLE9CfpK

Canvas Bootcamp:
https://www.youtube.com/playlist?list=PLlkGN-8wjPHWYT_00xdUibDPfHZ3Zm8i3

Basics of THREE.js:
https://www.youtube.com/playlist?list=PLOGomoq5sDLutXOHLlESKG2j9CCnCwVqg

HTML Canvas Tutorials:
https://www.youtube.com/playlist?list=PLQw6R3B2BPb29ktkWaiIzB3JBWguN7bER

Answer 2

Virat Kohli 🇮🇳 😄🤗how great, I'm really thankful😊👍👍👍

Answer 3

Thanks David Carroll Cbr✔[ ZeroCharisma ] Sheida Hedayati
It's really useful to me .

Answer 4

Arb Rahim Badsa I know I can't do that😃 but I'll give it a shot 😉🌹

Answer 5

David Carroll how cool😄👌 I haven't watched them yet. but I will,as soon as possible. thanks 🌹

Answer 6

David Carroll a million thanks 😊👌👍

Answer 7

Sheida Hedayati I'd suggest you to try yourself before searching! Who knows maybe you are able to make more gloriously than the result you get by searching!

Answer 8

Cbr✔[ Most active ] thanks dear 😊

Answer 9

Josh Greig thanks 😊

Answer 10

Sheida, i was also searching this topic CANVAS to learn, but what i found that the study material given on those online source are not quite efficient so i move to some books.

This book is long but will lead you zero to hero

HTML5 CANVAS by David Geary

http://booksdl.org/get.php?md5=d999d2e35532fc22bde42e94f3cc4eba&key=PSKBNW5IPHFI6GK0

If you want some more books tell me i will provide u some link to download that

(any foreign book)

Answer 11

Use sololearn and it's codes including solo-people you will be 0 to 1000! 😂 Kidding! Learning canvas just by reading is so close to impossible! You can challenge yourself for what you are aiming to achieve! If it comes for learning canvas, then take a challenge against yourself making at least one code per one day on the process of learning! Imagine making a building! You can't just build a completed one without starting from where it should be started! The foundation, pillars, roof and coloring etc come one after another to make it complete! Similarly, as a first step of learning, you can just learn how to make/draw a rectangle using canvas! If you search for that there will be a lot of answers even far away from your imagination! And if you done doing that, your next step can be how can I now make further things from what I've learned! You can now join two or more rectangles together to make a meaningful stuff, you can make the rectangle animated and so on! That's how the process goes on! 😅

Answer 12

Arb Rahim Badsa 😁thanks for your advice 👏👌 actually as you said I've seen alot about basic canvas like making rectangles, circles and so on. you are right I should start from basic and learn step by step, but for example I want some sources for learning how to make squib😃😁 and I couldn't find that.I can't learn from sololearn codes as well, they seem so complicated to me😆

Answer 13

https://code.sololearn.com/WaBJXc3O5bS9/?ref=app
https://code.sololearn.com/Wl5KKe7tbY38/?ref=app
https://code.sololearn.com/WL1RYbNVrCiz/?ref=app
https://code.sololearn.com/WwuTl7NjCsYi/?ref=app

Answer 14

Sheida Hedayati, I've learned my share of canvas from Khanacademy, it really explains stuff... Tell you what, if you want advanced stuff, start straight from the Advanced JS lessons.
Best of luck!
🙂🙃

Answer 15

Good advice Arb Rahim Badsa !

Answer 16

Sheida Hedayati I would look at that first video link in my answer. It's like looking at an existing code with someone walking you through the thought process and each step of the code. This is what makes it my favorite to recommend more than anything.

Be sure to experiment along the way. You will find yourself exploring many, many possibilities.

Answer 17

Nerderkips [CoderCat?][Not active] useful codes😊👍 thanks alot 🌹

Answer 18

go to goalkicker website and download HTML CANVAS for professional pdf

Answer 19

You may also want to check this related question and answer: https://www.sololearn.com/Discuss/1886512/which-app-can-i-learn-more-canvas

Answer 20

Awesome cool I am trying to create a clone of archer game , this might come in handy thanks