Drawing On HTML5 Canvas for Complete Beginners

[@FireController1847]

I've been searching for so long trying to find a good canvas tutorial which will FINALLY give me a great start, and I've been told alot, but so far this has made the most sense. Awesome!

[@FireController1847]

Just finished watching, cannot WAIT for the next one!

[@ChrisCourses]

Lovin the enthusiasm! Super glad I've been able to help, next one is going to be very interesting as animation really adds an aesthetic that you just can't get with static pieces. Next episode coming this Thursday at 9:00am. Stay tuned, keep with it, and you'll be producing some badass canvas pieces in no time :)

[@the_wrong_folder]

I was able to successfully get a random color. (I checked by console.logging my randomcolor variable. But all my circles are the same color each time I refresh the page. for (var i = 0; i < 5; i++) { var x = Math.random() * window.innerWidth; var y = Math.random() * window.innerHeight; var randomColor = Math.floor(Math.random()*16777215).toString(16); c.beginPath(); c.arc(x, y, 90, 0, Math.PI * 2, false); c.strokeStyle = randomColor; c.stroke(); console.log(c.strokeStyle); }

[@kekaci]

Hi fire

[@sergiudana8716]

iT`S been 2 years ... how is it going ?

[@peterhornbach303]

I don't usually subscribe to these tutorial channels but your lessons are truly exceptional. I'm a nurse trying to get out of healthcare by teaching myself web development. This whole series has really added a lot to my JavaScript coding. Thanks for the great content.

[@deleted_handle]

"Nurse trying to get out of heathcare by teaching myself web development." Why do I find that sentence funny 😂

[@bigmancozmo]

15:20 Heres how I randomized the colors: I added these two lines to the for loop: var colors = ["red","green","blue"]; var rand = Math.round(Math.random() * colors.length); Then, I replaced "c.strokeStyle = 'blue' " with "c.strokeStyle = colors[rand]" *You can add ANY color to the "colors" array

[@SachinMakadia]

Cant we do without array

[@bigmancozmo]

@@SachinMakadia With the array, you can restrict which colors it can and can't do

[@bigmancozmo]

11:36 *Tip for those who want to know more about for loops You can use the variable you defined for the loop inside the loop as basically a counter that changes every loop. You can even change the value of the variable inside the loop!

[@atlantic_love]

I wonder if you're still around, it's been SEVEN YEARS since you put this one up, and what a great series!

[@Loundre3]

My version for random generating the colors for the cycles, which includes also randomized transparency. c.strokeStyle = "rgba(" + Math.random() * 255 + "," + // Randomly generated brightness for color red Math.random() * 255 + "," + // Randomly generated brightness for color green Math.random() * 255 + "," + // Randomly generated brightness for color blue Math.random() + ")"; // Randomly generated transparency for alpha

[@muhammadjunaid3684]

If you want random hex colors, then this will be helpful. ♥ function randomColor() { let code = "#"; const values = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"]; for (let a = 0; a < 6; a++) { const randValue = values[Math.floor(Math.random() * values.length)]; code += randValue; } return code; }

[@andrendre8503]

I really never opened java and I even trying to figure out what I had to do fore like 30 minutes but couldn't ever type what you guys did, how did you guys learn?

[@davidnnacheta]

@@muhammadjunaid3684 Thanks mate! That did the magic 😀👍🏾

[@WebDevWithErfan]

'#' + (Math.ceil(Math.random() * 10000000).toString(16)) 🤲🏿

[@bryanmills5517]

You actually want to do 256 because 0 is included.

[@craigmillerer]

These videos are absolutely fantastic! I have been looking for a good explanation of the canvas element for ages. Really looking forward to the next episode!

[@ChrisCourses]

Awesome, thanks for such a fantastic comment. New episode coming at ya @ 9:00am next Thursday!

[@samdavepollard]

There are courses on udemy costing real $$$ which are garbage compared to the way you explain stuff. Many Thanks for sharing your knowledge.

[@max31505]

that is so true

[@renwar]

Different color for the circles: var color = ['red', 'blue', 'yellow', 'black', 'grey', 'green', 'orange']; var strokeStyle = color[Math.floor(Math.random() * color.length)]; . . c.strokeStyle = strokeStyle; . .

[@ilijaradosavljevic7166]

You need Math.floor

[@Randalandradenunes]

I did it this way: let randomColor = "#" + Math.floor(Math.random() * 25542195).toString(16); c.strokeStyle = randomColor;

[@cani8846]

you can do this without using Math.floor: c.fillStyle = '#'+ Math.random().toString().slice(3,6);

[@whydoubt]

@@cani8846 I really like this idea. One thing I would differently is make it with toString(16), as I want to use the full hexadecimal range for the digits, not just decimal.

[@danidemarchi]

@@Randalandradenunes I was wondering if you could tell me why you chose to multiple Math.random by 25542195 Thanks :)

[@ozzyfromspace]

You literally couldn’t have done a better job explaining this if you tried. This was awesome, Chris! 😭🙌🏽✨

[@AdegbengaAgoroCrenet]

This is the best Canvas tutorial I have seen thus far, previous tutorials always seemed to mystify the canvas even more. Thanks Chris for great work done

[@vahidgeraeinejad5273]

Loved this course! It's not only the material that's great, but your presentation style makes them really enjoyable. Awesome. Thank you

[@rubenlauwaert6673]

Bro, these tutorials are golden. Thank you so much !

[@ChrisCourses]

Thank you man!

[@kovan111]

Thank you for the video. We are so lucky to have you on youtube.

[@sdueweke]

Oh man, I'm so glad to have stumbled upon these tutorials, but I was gutted when I reached the end and found that the next one hadn't been recorded yet! Looking forward to it.

[@ChrisCourses]

Looking forward to it as well, currently 25% done with editing, but looking to make that 100% before tomorrow morning. Should be released at 9:00am tomorrow. Would get these out quicker, but I make them during my free time after working a 9-6, so a bit restricted when it comes to free-time. Nevertheless, still looking to get everything out on a consistent basis to help you and other devs interested in canvas :)

[@latinstuff1]

dude thank you so much, I have a full week to present a video game on canvas and this is a life saver !!!!

[@carsonikey1716]

Thanks for the tutorial Chris. This is really high quality stuff. Here is my for loop with the randomized colors. I think I did it right so if you couldn't figure it out, see below: for (var i = 0; i < 100; i++) { var colors = ['red', 'orange','yellow', 'green', 'blue', 'purple', 'pink']; var x = Math.random() * window.innerWidth; var y = Math.random() * window.innerHeight; c.beginPath(); c.arc(x, y, 30, 0, Math.PI * 2, false); c.strokeStyle = colors[Math.floor(Math.random() * 7)]; c.stroke(); }

[@salimahusain5819]

how about this: for (var i = 0; i < 100; i++) { var hue = Math.floor(Math.random() * 360); // number from 0 to 360 var saturation = Math.floor(Math.random() * 25 + 75); // number from 75 to 100 var brightness = Math.floor(Math.random() * 50 + 25); // number from 25 to 75 var color = "hsl(" + hue + ", " + saturation + "%, " + brightness + "%)"; var x = Math.random() * window.innerWidth; var y = Math.random() * window.innerHeight; c.beginPath(); c.arc(x, y, 30, 0, Math.PI * 2, false); c.strokeStyle = color; c.stroke(); hue = Math.floor(Math.random() * 360); // number from 0 to 360 saturation = Math.floor(Math.random() * 25 + 75); // number from 75 to 100 brightness = Math.floor(Math.random() * 50 + 25) ; // number from 25 to 75 color = "hsl(" + hue + ", " + saturation + "%, " + brightness + "%)"; c.fillStyle = color; c.fill(); } That way, each circle would have a random stroke and fill with ANY hue on the color wheel.

[@jakub7048]

Mr Chris, very cool stuff here :) My way for different colors of circles: var color = ['red', 'blue', 'green', 'yellow', 'pink']; var tmp = 0; for (var i = 0; i < 69; i++) { tmp++; if(tmp==color.length){ tmp=0; } var x = Math.random() * window.innerWidth; var y = Math.random() * window.innerHeight; c.beginPath(); c.arc(x, y, 30, 0, Math.PI * 2, false); c.strokeStyle = color[tmp]; c.stroke(); }

[@kamilmikua5794]

I have done a lot with p5.js, but i needed more understanding in js basis, thanks for giving me that!

[@hamzasaleem6154]

I dont understand what kind of people are they who dislike this types of videos . Love your videos

[@amarparajuli692]

I will surely recommend this series of tutorials if someone wants to learn Canvas HTML5.

[@maresolaris]

You are an amazing teacher, introducing more advanced tips and tricks while explaining how it all functions. Thank you very much for this excellent series!

[@thomascarlton82]

This canvas stuff is dope!!!

[@milosleng1175]

this tool is unbelievably powerful, I love it. After many trashy tutorials found the best one, thanks! btw, my loop did not work itself, I needed to put it inside a function which I called. I am surprised you just make a loop and it works like that.

[@danielnieto569]

Best canvas tutorial on youtube!

[@cmtg4471]

This is a good canvas tutorial, what I really love here is that he gives challenges or actovities to fire up that learning experience.

[@well.8395]

For those who are stuck, here's the code for randomizing colors - //creating multiple circles using arcs for(let i = 0; i < 32; i++){ //x-co-ordinate; let x = Math.random(); //y-co-ordinate; let y = Math.random(); //random number for size; let z = Math.random(); //randomizing colors let _redDepth = Math.random(); let _greenDepth = Math.random(); let _blueDepth = Math.random(); c.strokeStyle = 'rgb('+Math.floor(_redDepth*255)+','+Math.floor(_greenDepth*255)+','+Math.floor(_blueDepth*255)+')'; c.beginPath(); c.arc(x*window.innerWidth,y*window.innerHeight,z*100,0,Math.PI * 2, false); c.stroke(); }

[@ahlambeyoud1709]

why do you put Math.floor(_redDepth*255), Math.floor(_greenDepth*255), and Math.floor(_blueDepth*255) between + signs ?

[@celerystick]

@@ahlambeyoud1709 your adding javascript to the string

[@latinstuff1]

I just wanna say , you are such a cool guy ! keep up the awesome work man

[@michaelallison7259]

Thank you for this video - I wish I had've seen your video before watching the 50 others i watcehd that didn't explain this concepts anywhere near as well as you did. This video (and your whole canvas series) is awesome

[@happytraining6437]

Your course is excellent. Thanks a lot!!

[@andriesvanwyk3226]

You are an excellent teacher! Thanks so much, man

[@balajijones6548]

One of the good tutorial Thanks Chris courses

[@iconsumedmt1350]

Your work is amazing. Please don't quit youtube

[@x9wozz]

My favourite way of randomizing the circle color is by adding variables for each color and then applying them to strokeStyle via concatenation. Like so: let r = Math.random() * 255; let g = Math.random() * 255; let b = Math.random() * 255; c.strokeStyle = "rgb("+r+", "+g+", "+b+")";

[@x9wozz]

I found even better way by using template literals. It made it much cleaner for me. c.strokeStyle = `rgb(${r}, ${g}, ${b})`;

[@HealthHabitsHQ.]

if i wanted to change each of the colors to blue, red and green how would i go about doing so :P

[@onlyprogrammer7669]

you're the greate teacher of canvas at youtube plateform ||| salute from my side 👍👍👍

[@chriscarhart4775]

"There's only so much we can create with rectangles and squares" *Welcome to Minecraft!!!!!!*

[@kshau_]

lmao

[@Stevesteacher]

The radians shook me for a while, but it got easier after I played with the math... NOTE: Linux calculator advanced mode has a nice convertor 1 radian = 180/Math.PI = 57.3 degrees 2 radians = 180/Math.PI * 2 = 114.6 degrees 3 radians = 180/Math.PI * 3 = 171.9 degrees 4 radians = 180/Math.PI * 4 = 229.2 degrees 5 radians = 180/Math.PI * 5 = 286.5 degrees 6 radians = 180/Math.PI * 6 = 343.8 degrees 7 radians = 180/Math.PI * 7 = 401.1 degrees - more than 1 circle 1 circle = Math.PI * 2 OR 180/Math.PI * 7 (Then you get slightly more than 1 circle) OR 6.28 radians (exactly 1 circle)

[@Ankitapatil96]

Excellent. Easy to follow, Easy to understand..................

[@contrazzed3651]

I'm taking a university course in web development (computer science major) and the professor put a link to this course in one of our projects. This was actually really helpful. I subscribed. I'm also working with WebGL for a different course, so if I may recommend a topic for a future series, it would be cool to see what you could do with 3D elements. It all runs natively on the canvas element as well.

[@ChrisCourses]

Woo that's awesome! I remember taking a canvas course back in college with a few provided course links as well, super cool to hear that I've made the cut and that you've found the series helpful. Pertaining to WebGL, I've used it quite a bit throughout real-world client projects, so you can definitely count on this being it's own series down the line as well. To get an idea of some things we might cover, check out the homepage on christopherlis.com (accelerometer features on mobile)-I'm essentially looking to provide knowledge on how to develop creative scenes that enhance your site's messaging and provide a unique, fun, interactive experience.

[@gektorix]

Just a comment to support the channel. Keep up the good work. Very interesting content.

[@lilturnt1522]

Bro this is a great tutorial!

[@Aziz00747]

I'm loving these! plz do make more.

[@maskman4821]

it is so fun to play with this example!!!

[@buch3rcsgo770]

If you wanna try to randomize the colors try to make a new variable '#'+Math.random().toString(16).substr(-6); and set the variable to strokeStyle, in this way youll make all ur x amount of circles stroke etc not only be random pos but also random colors hf practicing.

[@qamar7]

Thank you so much I was figuring out this, is there also way to play with rgba?

[@avi12]

I love how you linked a Khan Academy lesson to teach the basics of radians. Studying in order to understand your work is important!

[@leofreiitas]

That is the function to create random color, for anyone who had some trouble creating it: for (let i = 0; i < 300; i++) { const x = Math.random() * window.innerWidth const y = Math.random() * window.innerHeight const red = Math.floor(Math.random() * 255) const blue = Math.floor(Math.random() * 255) const green = Math.floor(Math.random() * 255) c.beginPath() c.arc(x, y, 30, 0, Math.PI * 2, false) c.strokeStyle = `rgba(${red}, ${blue}, ${green}, 0.8)` c.stroke() }

[@leofreiitas]

actually that is not a function =)

[@dl88889]

Excellent. Easy to understand, easy to follow.

[@ChrisCourses]

Sweeet, glad you think so, thanks for watching.

[@DarrylSullivan]

These are really easy to follow tuts mate. Really looking forward to #3. Thank you

[@christopherortiz7202]

Chris, this course is awesome! I've struggled with learning canvas simply because text tutorials were difficult for me to stay focused on. Having your voice over and demonstrations is helping me retain the information so much better. Thanks for this, and keep up the amazing work!

[@Harry-ub2fv]

I finally got an interesting video on the canvas after a long time. Thanks, man!

[@aimeeshadow15]

Great stuff! love it

[@mrmbeautiquethebrand]

Wow. It's great you give beautiful task. Thank you.

[@leonwang4762]

wow! been looking for this kind of content forever, great job man!

[@danulasahitha9653]

Very clear explanation. Thank you very much...

[@jlangbass]

Wow man these videos are amazing. Very helpful and put together excellently.

[@ChrisCourses]

Thanks man, happy to hear it!

[@rommellobiano2221]

every episode makes me excited for the next :D

[@chengzhang4341]

your videos are the best !!!!! Thank you so much, Master !

[@nv3151]

Its easy , I liked it 😃

[@gravityarm9240]

man you have talent to teach people

[@ChrisCourses]

Thanks, hope I can continue teaching and helping you out in future videos :)

[@neozhan7650]

Easy and clear ， thank you !

[@kolawoleomotosho3073]

Beautiful. just Beautiful

[@filipslatinac845]

Great series man !

[@munikumar5095]

Your cool bro i never see like this explinatiin in youtube this convas tutoril is realy helpfull for me thank soooo much... Bro....

[@avi12]

13:42 You can use the properties in the window object without actually writing "window." I.e. const x = Math.random() * innerWidth; const y = Math.random() * innerHeight;

[@adamman8874]

Dude, thanks. You explained this well. Keep up the good work.

[@ChrisCourses]

Anytime man, thanks for tuning in.

[@DallasOliver91]

Really Clear, concise, and easy to follow lessons on how to use HTML5 Canvas. Great Job Chris!

[@Ksu_]

thank you!!! rly clear tutorials

[@hadarmanor12]

thank u !! this is really amazing , we can see your hard work and its sooo helpful !!

[@Polymath1729]

amazing course man thanks a lot by watching these two videos I created a chess board and a right angled triangle using lines with factors 0f 3,4,5 to make accurate triangle....... by understanding concept I will try to keep practicing the whole playlist looks so exciting... again thanks a lot

[@abhishekpanwar2804]

Thank you so much dude your teaching style is too good

[@ChrisCourses]

Thanks man, happy to help 🙌

[@avi12]

14:55 Because you're drawing to the canvas from JavaScript, you're right. The JavaScript engine uses the CPU. But, as soon as you start using the GPU, which in general has significantly more cores - you can handle much greater amounts. WebGL is your key when it comes to the GPU.

[@ziobemus9377]

You explain so good..ty for your tutorial

[@nodvick]

assuming you're going to do similar later in the course but something like var defaultFill = "#000000"; // use "true" for style if you want to just use default, or use defaultFill function rect(var ctx, var x, var y, var w, var h, var style) { if(style !=== true) ctx.fillStyle = style; ctx.fillRect(x,y,w,h); ctx.fillStyle = defaultFill; } is helpful in saving a little bit of space and making sure you remember to style and don't accidentally change it and forget to change it back to your default later.

[@maelifrancois]

Thank you so much ! Great work ! I am so happy to finally find such a good explanation !

[@antonioguiotto529]

great video, thank you very much from Italy!

[@missoula2213]

Vid starts at 2:15

[@hebrux]

If you want to randomize the colors of the circles you can use this code: for(var x = 0; x < 100; x++){ let x = Math.floor(Math.random()*window.innerWidth); let y = Math.floor(Math.random()*window.innerHeight); let r = Math.floor(Math.random()*255); let g = Math.floor(Math.random()*255); let b = Math.floor(Math.random()*255); c.beginPath(); c.arc(x, y, 30, 0, Math.PI * 2, false); c.strokeStyle = "rgb(" + r + "," + g + "," + b + ")"; c.stroke(); }

[@ignaciovelarde9066]

thank you so much for this, i had the idea but i was doing something wrong with the strokestyle...

[@AndrewsalTk]

Awesome!

[@Mihir_sahu.]

information are never old.

[@antonioquintero-felizzola5334]

Chris, this is an amazing tutorial. Thank you for sharing your knowledge ✌️😉

[@Peacexpd]

I love this beat, you are good

[@GringoProductions]

great stuff, thank you, sir.

[@abdechahide1408]

Man You Are Amazing

[@codeChris]

Man your have some really impressive work. Thank you so much for this great explanation of the canvas. I have wanted to mess with it for awhile but till this didn't find a good video from someone who understood it like this :)

[@amarparajuli692]

I was so much searching for such a course. Thanks Bro. It helped a lot. :)

[@Soochoup]

Great content, lessons are well constructed. Keep going !

[@sivaprakashd.3362]

Most Useful Tutorial, Thanks. Waiting for next Video

[@ChrisCourses]

Anytime, this is so great to hear. Next video coming out this Thursday @9:00am.

[@emmanue237]

this course is very helpful

[@alapanroy1114]

Finally got my perfect instructor....

[@MrScX]

Lovely! Thanks a lot.

[@bcjcrypto]

Amazing video, thanks man

[@evanwilson9906]

Thanks for the video. This is great.

[@sagi250]

bro youre course is amazing!

[@jacobs6145]

Awesome job, everything seems so much easier now ;)

[@abhigyanraha5620]

You are amazing!

[@ChrisCourses]

Thank you!

[@PersonalDanielMuringe]

wow bro great energy

[@karstenlehmann13595]

Nice video-series about canvas! 👍

[@ChrisCourses]

Thank you!

[@valentynkhaman7688]

instant like!!) good job!

[@sumedhburbure4173]

Great video!

[@mojajojajo]

Great content, your voice is nice to listen to, you got a new subscriber. Please make more advanced tutorials, like just a random canvas topic, really helps people starting out. Thanks in advance