HTML5 Canvas Tutorial for Beginners [How to Draw Shapes with JavaScript]

[@Frankslaboratory]

Click the LIKE button please :) How many days a week do you spend coding? Do you code at least once a week? Is it usually on weekends? And is it mostly your personal projects, work or are you following tutorials?

[@ShayanBinShad]

I usually code everyday to learn and find new tricks to complete them with ease. Most of them are personal project, cheat sheets and crazy ideas that I dreamed yesterday night and working on it today morning. Back in 2015, I tried to follow some tutorials but I gave up at the end of that year, because they're simply boring but your tutorials are simply great and it makes me to come back to your channel! :)

[@Frankslaboratory]

Hi Vika. It's great to know we have another professional programmer here. SQL and MVC work is very advanced compared to most of the things I do here on the channel. I'm looking forward to see what kind of projects and animation you come up with, I bet you will be able to produce something special and unique. Also your English is very good.

[@Frankslaboratory]

Hi Shadow. I'm happy to hear you find my projects interesting. There are so many things we can do with JavaScript and CSS. I have a big list of ideas but it takes time to make videos on everything. I code every day as well even weekends ha

[@ShayanBinShad]

@@Frankslaboratory 😊 That's true, possibilities are limitless with JavaScript and CSS and coding everyday is good to skill up coding techniques. BTW, you drew the shapes with Fibonacci series, is it possible to do the same thing with Prime numbers or Factorials? Will there be a change in the pattern or it may look like the same?

[@maharajsingh6646]

@@Frankslaboratory i like the way this channel focuses on vanilla js as its very necessary for begginers. I found this channel some months ago but didn't understand anything coz i had so less knowledge of js and then forgot about it but today i found this channel again and i have now decided to complete all the tutorials on this channel as it would be a really good practice. Thanks sir for making this channel. This channel is really underrated. Please do something everyone.

[@aitorvazquez6148]

I just found your channel and it is the best thing that life has given me

[@Frankslaboratory]

Hi Aitor, glad you found me, hope I can help you a little bit on your coding journey :)

[@Sharief001]

I feel the same ❤🥰🥰😍🥰🥰 Frank is the best to be frank 😂

[@aaronaaronaaron5922]

Wow, Frank, I really love your channel. Definetly one of the best on the Tube. Thanks!!!!! 🚀🚀🚀

[@justpassingbylearning]

I literally yelled wow and flew back in my chair at 19:30 that is so cool and so simple. I haven't done geometry or trig since High School but this makes so much sense! Keep it up Frank.

[@Frankslaboratory]

Hi. Yes I like revealing how things actually work. Everything starts making much more sense. Trigonometry in creative coding is not that difficult once we understand how sin and cos work together to map a path along a circle. Once you know what you unlock thousands of new effects and animations you can create :D

[@countmein5164]

Your tutorial is gold, because I didn't know front end would be so cool and friendly to implement

[@kifayatUllah712]

SubhanAllah these patterns are amazing! What's even more amazing is the precision in nature. Truly, Allah made everything with precision. إِنَّا كُلَّ شَىْءٍ خَلَقْنَـٰهُ بِقَدَرٍۢ ٤٩ *_Indeed, We have created everything, perfectly preordained._* _[Quran 54:49]_

[@chiragkushwaha546]

yeah same i'm a self taught fullsktack developer, now working fulltime as a fullstack developer. yeahh shiffman and that math guy is great. i am following shiffman channel from the very start watched all of his video and he's really amazing i learned oops concept from his videos which is helping me a lot now. and yes frontend development knowledge is great too.

[@Frankslaboratory]

Hi Chirag, nice to see a self taught full stack developer, must have been a lot of hard work, you are a motivated guy. I like to watch coding train channel for ideas, I want to do more AI and movement animations, inspired by his videos

[@bluebee2939]

It's one of the most interesting and easy to understand tutorial of JavaScript, thank you so much.

[@vishnukumarkannan3159]

last 10 minutes was like a roller coster ride, wow man, u r genius

[@Frankslaboratory]

Hi Vishnu, really? Thank you, very happy that you liked it. Experimenting with codebase like that is always my favourite part haha

[@mister-bellini]

At this point I'm watching your tutorials like I watch netflix. So awesome how you manage to explain everything without getting caught up in details.

[@Frankslaboratory]

Hi Lukas, you are good if you can keep up at that speed, well done!

[@dahlia_124]

new seasons please !

[@chronobytes971]

First time here and I am a student who is learning frontend development to support my studies expenditure.

[@Frankslaboratory]

Hi Suhail, nice to meet you. Front end and canvas is a fun way to learn coding, hope you find it as a way for your future success

[@unknown-bx8my]

Thanks you for this video And thanks for make the font more bigger

[@Frankslaboratory]

Hi Abed, thank you. I will try to remember to keep the font this size this size for all my future videos :)

[@kencg6566]

Very fun tutorial. Thank you Frank!!! 👍✌

[@gektorix]

This is my second video! I plan to review each of your videos and like them all!

[@Frankslaboratory]

Hi, nice to meet you. Good to have you here, have fun with the projects :D

[@Slimboyfat1979]

Love this channel. Thank you, you are so good! Love your friendly and easy to understand style.

[@mango_water169]

Great video, could you make a maze solving algorithm pls ?

[@Frankslaboratory]

Hi Daniel, nice to meet you. Great idea, yes I am adding maze solving algorithm on my future videos to do list. Thank you for suggestions :D

[@tinhninsuwaitinhninsuwai9593]

I practice coding everyday whenever I free. Your video is so helpful for me but It will be better if your coding font size is big. Thanks!

[@Frankslaboratory]

Thank you for your feedback, I will increase the font size

[@yangxiyu5667]

Really great tutorials!! Thank you!!!

[@javifontalva7752]

I am learning so much from you. I will be eternally grateful to you. Keep it up!

[@Frankslaboratory]

Javi, I find you on a lot of videos lately. Well done, you are working hard

[@LLLearning1]

Thanks Frank this is great. I worked out if you add the following lines to the animate function and remove the return if statement, you can get a continuous refresh for a new flower design. if(number > 250) { ctx.clearRect(0,0,canvas.width,canvas.height); number = 0; } Keep this content coming.

[@Frankslaboratory]

Awesome, yes this will work, endlessly growing flowers I like your ideas, might make an interesting animated background for example

[@FFergussond]

Man I love your videos, before I started the video I always press the like button before the play button haha

[@Frankslaboratory]

Thank you, very nice to see a comment like this 😍

[@basiccoder2166]

Thank you frank amazing tutorial i have shared this video with friends as well

[@Frankslaboratory]

Glad you found some value Vipul

[@ghfromalexandria9478]

Thank you! You're making JavaScript fun and beautiful!

[@Frankslaboratory]

Oh, so you found more than one video you like on here, happy to see that :)

[@santana1971]

He is ! But he is making it also harder🤣 well anyways i still love it !

[@JM-de2gh]

0:34 humm is it coffee? The first sniff is to see if it's too hot. It kinda is, but then Frank mans-up. The coffee left a little bit of after shock as you see his eyes jolt open for a sec. Coffee - it's Frank's secret to creative coding! I really liked the effect you teach in this video. Thanks Frank

[@Frankslaboratory]

Ahaha you are funny Jon. And you are completely right as usual. My secret is strong black coffee with no milk and no sugar. What is your secret, do you have any? :)

[@JM-de2gh]

@@Frankslaboratory If you're talking drink -- Tea, no sugar. If you're talking learning technique -- Plan a route first. Find out what stack you need to learn to accomplish your goals. As a full-stack web developer I have chosen the MERN stack (I ignore those who say it is depreciated). Then I use Variety and Repetition to achieve the plan. Repeat things until you don't need the source to do it yourself anymore. I've watched the same 25hr class in Udemy at least x4 times at this point, very helpful. But for variety I have watched many other teachers out there -- such as Franks Laboratory! The variety helps you discover teachers that you like possibly better than the ones you started with. Example, I like Brad Travery but I found that Bob Ziroll is far more helpful to me. I liked Udemy at first, but found Scrimba to be a better platform for learning, etc.

[@Frankslaboratory]

White tea? Are you English? I did couple of MERN tutorials last year, I like it. Repetition is important. I watched JavaScript: Understanding the Weird Parts 3 times already (12 hour class). It's not for everyone but I think it's good to really understand the basics. I'm not familiar with Bob Ziroll or Simba but I will check it out now. One thing I don't like about React is that it changes too fast. I bought a brand new course and did the whole thing, next week in live coding test during job interview they told me that this syntax was deprecated and I should keep up to date. That doesn't really happen with vanilla JS. Of course React/Angular/Vue are needed these days, it wouldn't be efficient to build single page web apps with vanilla.

[@JM-de2gh]

@@Frankslaboratory Heh, I drink Dark Tea -- which I guess represents Southern USA fairly well. Although... most people around here add tons of sugar. I completely understand the constant changes thing being frustrating. I have only kept up with React, but I will say the changes they have made recently are actually amazing. Yes, there are too many technologies to keep up with, so it's probably best to stick with one Stack until you can't anymore. I was advised as a freelancer, by a vet freelancer, to not charge to learn another stack but to only learn the stack if a client demands it. Even then, you may not need to master it if only one client asked for it once. I will say React is super helpful and I can't go back to building things with only javascript. All that being said, I think your vanilla javascript focus is a very helpful one, as it is a necessary foundation to learning something like React.

[@Frankslaboratory]

I would love to live in Southern USA. I have full window of venus flytraps carnivorous plants. They would grow much better in Florida haha. I really like React actually. The constant changes mean it keeps getting better, it also embraces new syntax and experimental features which keeps you up to date with webdev in general. Once you know vanilla JavaScript and one of the main three (React/Angular/Vue) you can learn anything fast. For me Angular is the most difficult one to understand. Vue is great. Also I am curious about React native and how easy/difficult it is to make a JavaScript game into native Android/iOS app with it. It's on my todo list :D Every good boss and experienced developer will put vanilla JavaScript above anything else. There are many people who don't really understand scope and closures, for them React must seem like magic. React is amazing but having solid knowledge of the basics makes everything make much more sense.

[@djdidge]

Awesome vid, well presented and interesting. Thanks!

[@FrederickAlvarez_]

I came from tiktok, very good content, thanks sensei

[@Frankslaboratory]

Hi Frederick, nice to meet you. I hope it helps you on your learning journey, good luck :)

[@alifnurrohman9940]

Thanks Franks laboratory, i'm very like your channel and your video, this channel is so good, regards me from Indonesia 👍

[@Frankslaboratory]

Hi Alif, nice to meet you, good to have you here. Thank you for your feedback much appreciated. Greetings to Indonesia :D

[@redpie907]

So gooood 😍 I set the angle to a rundom number "let angle = number * Math.random() * 3000;" and its soooo interesting result came out :D

[@Frankslaboratory]

Looks like you discovered that creative coding experiments are fun, it's my favourite part :D

[@agent-33]

Thank you for this educational content. I'm practicing JS on my mobile and I'm trying to make simple mobile WebApp games. So far I made a Pong. :D I don't like using frameworks or game engines, I rather learn how to code. BTW do you have knowledge about 'pre-rendering canvas' or 'offscreen canvas' for animation of game? How it works and does it have boost on performance? I have researched but still confuses me. I see no video about it too. (not the OffscreenCanvas object because according to the docs it is experimental and not supported on android)

[@Frankslaboratory]

Hi Agent, are you saying you are coding everything on your mobile, not using computer at all? I am the same when it comes to frameworks or engines, at least when it comes to learning. Vanilla JavaScript is the best. When it comes to optimisation techniques I haven't used pre-rendering or off-screen canvas. When I learn it I will make a video about it, good idea thank you. For games I optimise it by only redrawing parts of canvas that are interactive. For particle effects there is a limit how many particles we can have on the screen at once. This number can be 10 times larger if you use quad tree instead of the beginner level code structure I use. I will also make some videos on that in the future. There are many many ways to boost performance. Something to look into for me.

[@johnatteo822]

you need to get a laptop bro thats to hard coding on the phone hehe

[@flemingagogo]

Your videos look great. I can’t wait to get started. Have always dabbled in procedural php MySQL, and a little jquery, but since retiring a few years ago would like to write educational games for my young grandchildren. I’ve always wanted to learn JavaScript and game animation and your videoes seem like they are just my learning style. Thank you so much for putting this on KZbin.

[@Frankslaboratory]

Hi Fleminga, nice to connect with you on here. Thank you so much for your feedback that's very kind of you to say. I love the idea of educational games and I want to explore it more. It sounds like a great way learn coding but also to learn about other things. My big passion is nature and biology, might bring it together somehow for an education game project one day. If you make any educational game project and want to share it with us I would love to see it.

[@flemingagogo]

@@Frankslaboratory Thanks for the encouragement, Frank. I’ll keep you posted on my progress.

[@ulricof.carmona6726]

Amazing! Thank You!

[@BrunnooM]

amazing series! Thank you so much for this. I wanted to ask you something, what's that voodoo going on under the hood? your Visual Studio gives way more tips than mine xD Thank you once again, I am coming back to Web Development after some years and your videos are exactly what I was looking for to develop my skills!

[@Frankslaboratory]

Hi BM, thank you :D I use Emmet and Live server extensions for VS code, nothing else at the moment, for example there is a way to get intellisense (suggestions) for canvas method by including this line of code /** @type {CanvasRenderingContext2D} */

[@GeminiLearning]

Thanks Frank for the great videos

[@Frankslaboratory]

Hi Okwaro, nice to meet you. Thank you :)

[@drinkfood6739]

Love you Mr Frank!

[@Frankslaboratory]

Hi 👋 🤩 😍

[@sagar-tt4ub]

Such a good video, Frank. Can you recommend any sources from where I can study/read about process compendium?

[@Frankslaboratory]

Hi Sagar, thank you :D Are you looking for sources for JavaScript, web development, canvas or creative coding in general?

[@sagar-tt4ub]

@@Frankslaboratory Hey Frank. I am looking for creative coding in general

[@Frankslaboratory]

Hi Sagar, I started my channel because there aren't many sources for creative coding online. Especially not in Vanilla JavaScript. My favorite channel for creative webdev is Online Tutorials, for generative art I watch Coding train, he uses p5.js though but you can easily convert his code to vanilla JavaScript if you want, Processing is also easy to convert to JavaScript. I learned from random pieces of content on the internet but in terms of complete guide I don't know about any. If you find something let me know please :)

[@sagar-tt4ub]

@@Frankslaboratory sure, I'll look up for the coding train. Thanks a lot, Frank :)

[@fonncatalina6464]

Hi Frank, I recently learning React but facing burnout issue, then I come back to your channel learning fun vanilla js, it clear my bad days! Thanks a lot! I have a suggestion tho, could you please make a cool Final Fantasy like inventory shopping cart that use fetch api or something works with data? Just my suggestion, please make whatever videos you like , we would love it!

[@Frankslaboratory]

Hi Catalina, React is in demand and knowing it will help you get job interviews. It also helps a lot to understand it if you have solid vanilla JavaScript knowledge. It's good to switch between fun project and more business oriented coding stuff, at least for me. I like your idea and now it makes me play Final Fantasy instead of coding all weekend, ahaha. I need to be careful because sometimes I can be enjoying videogames a bit too much :D Thank you for taking the time to have a chat with me :)

[@sojuthomas7727]

Thank you so much..I learned a lot...which playlist would you prefer me after I finish the beginners playlist ?

[@Frankslaboratory]

Hi Thomas, thank you for such a nice feedback, I always like to see comments from you. After the beginner playlist I don't really have any structure to my videos, it's just standalone tutorials of varying levels of difficulty. Eventually I will make beginner, intermediate and advanced playlists but at the moment it's a mixed bag :D

[@sojuthomas7727]

@@Frankslaboratory If you create separate playlist that will be a real help for us.Thanks again 🙂🙂

[@time4062]

Your presentation skill is so good

[@Frankslaboratory]

Thank you very kind to say that

[@StudioYulianto]

Hallo franks saya senang dapat mengikuti videomu.

[@Frankslaboratory]

Hi, hope you find some value

[@derbicalderon6900]

Amazing video , thank you so much!

[@Frankslaboratory]

Hi Derbi, glad you like it :)

[@kamalgajavalli6174]

thanks a lot for this tutorial. But how can we decrease the size of circle as the animation moves on.

[@Frankslaboratory]

Hi Kamal, it's easy, take radius of the circle and make it smaller for every step. Also check it's not less then 0 that would break the code. if (this.size > 0.2) this.size -= 0.2, put that somewhere in update method.

[@delahogue]

Fantastic tutorials :) Im learning so much from you. Love the depth of your explainations of why things act like they to :D :D

[@Frankslaboratory]

Hi. Thank you for nice feedback. I will try to do more of explanations like this if you like it. I usually only do it if I consider the project to be for beginners

[@delahogue]

@@Frankslaboratory Ive been doing courses at Udemy trying to learn coding. Going the self taught route ;) And for a beginners like me the learning curve quickly gets steep. Many of the concepts of coding are considered common knowledge for coders. But when you dont have the a proper basic foundation its hard to know where or what to search for. But coders like you, Shaun from Netninja, Daniel Shiffman and Lawrence Turton are really helping out :D I recommended your channel to other beginner coders like myself. Even if its "advanced" coding your doing the way you explain it line by line and factorize the code really makes sense. Keep up the good work :D

[@Frankslaboratory]

Everybody responds to a different teaching style. I'm happy you like the way I explain things. Some people never get past the beginner stage but I know from experience that you can get from beginner to advanced in 2 months if you work hard.

[@delahogue]

@@Frankslaboratory Saturday loner time B). Jazz, beer and coding :D

[@jfirestorm44]

Very good tutorial. Thank you.

[@Frankslaboratory]

Thanks Family Man :)

[@thequickcode5144]

the very best part is hue colors changing dynamically :)

[@Frankslaboratory]

Glad you like it. Rainbows make everything better haha

[@thequickcode5144]

@@Frankslaboratory I'm learning from your channel can you please make a video on ecommerce admin panel template with html css and bootstrap because your teaching style is very very nice.

[@thequickcode5144]

@@Frankslaboratory and please also make videos on backend development

[@dahlia_124]

Awesome! 🏵

[@dins9103]

Hi, can you make a video about make html canvas responsive on mobile and table?

[@harshprajapati2729]

Just find you channel in college holidays and really enjoy my weekend I have one doubt ,what should I do if I wan to rotate my ctx infinite time like wheel?

[@Frankslaboratory]

Hi Harsh, nice to meet you. Canvas rotation is easy but you need to understand the logic behind it, first you use ctx.translate to set centerpoint of rotation, then ctx.rotate and you pass it everincreasing angle value. Wrap all that in ctx.save and ctx.restore if you have other elements on canvas you don't want to be affected by the same rotation. Canvas rotates everything. I explain it slowly step by step in this video kzbin.info/www/bejne/inO7m4qph5yLeqM where I create animated background with rotating falling pumpkins, if you need more help.

[@harshprajapati2729]

@@Frankslaboratory I tried one method and its actually worked but it is lagging very much for more branches I tried you making snow video contain!

[@daria_vyshniakova]

cool tutorial, thank you!

[@Frankslaboratory]

Hi Darya, happy to help :)

[@FFergussond]

I'm glad to see all the ads my brou

[@Frankslaboratory]

Making that sweet KZbin money haha (it's not that much but covers my coffee budget haha)

[@FFergussond]

@@Frankslaboratory hahaha Im glad to read this! coffee is lovee

[@absurd0000]

thank you! love your tutorials

[@Frankslaboratory]

Thank you Erik ❤

[@paulosilva-dm1qb]

Great!!!!!!!!!!!!!!!!!!!!!!!

[@Frankslaboratory]

Glad you found some value

[@alwysrite]

Yes I watch Dan Schiffman but he only uses P5 library and I wanted something more basic so I can use VS code to create my HTML /CSS / JS

[@time4062]

You are just amazing 🤩🤩

[@Frankslaboratory]

Thank you :)

[@niccolo7267]

Great video!

[@Frankslaboratory]

Thank you Treno :)

[@ajaysen7290]

It's very helpful for me 😉

[@Frankslaboratory]

Hi Ajay, glad you find it helpful. Good luck with your coding studies :)

[@jamescao2008]

A good tutorial! Develop code step by step and talk detailed comments at the same time.

[@Frankslaboratory]

Thank you for that feedback James

[@adebamowotaiwo1043]

Thank you frank for this. Please what symbol did you use after the math.pi?

[@Frankslaboratory]

Hi Adebamowo, do you mean inside ctx.arc method? The last argument is Math.PI * 2, * asterisk is a operator for multiplication in JavaScript so it means Math.PI times 2.

[@adebamowotaiwo1043]

@@Frankslaboratory Thank You Frank. I was having a hard time to get the codes working, but i googled it out. Thank you for this. I'm really enjoying it. But if you don't mind, how does making games help develop my frontend skills?

[@Frankslaboratory]

@@adebamowotaiwo1043 If you make games with vanilla JavaScript it helps a lot with your frontend skills, because you have to use for loops, classes, array methods etc. All these things are needed for front end projects as well. In a way, JavaScript game is basically an interactive website.

[@adebamowotaiwo1043]

@@Frankslaboratory Thank You

[@elisabethsweet]

Thanks so much for this! Your videos are great. Would you consider making one about how to turn javascript code into a gif? Either way, your work is much appreciated!

[@Frankslaboratory]

Hi Elisabeth. Yes I like the idea. Maybe convert canvas animation into gif or series of png images. Its not that difficult I will make a video about this eventually

[@michaelperkins4757]

excellent videos :) what code editor do you use thank you

[@Frankslaboratory]

Lately I use just VS code because it has the most features (live server, code snippets etc)

[@phylinea620]

Thank you so much for your videos. They are truly amazing! I have a question. I would like to make a flower which starts in the middle with a darker color or black and gets lighter to the outside. Has anyone any suggestions how I could achieve this kind of effect?

[@Frankslaboratory]

Hi, you could use HSL color declaration and instead of hue cycle though lightness value, start at black hsl(0,100%, 0%), make it cycle though 50% and end up at hsl(0,100%, 100%). If you need more help message me on Twitter with your code on Codepen, I will adjust it for you to make it work when I have time :)

[@aitorplaza2560]

Nice tutorial, really valuable.

[@Frankslaboratory]

Hi Aitor, I don't think we spoke before. Thank you for your feedback, I'm happy you found this video useful. Enjoy your weekend :D

[@jonnyvirgomusic]

Hi \frank. Great video

[@Frankslaboratory]

Hi Jonny, thank you :)

[@minininja5505]

fantastic!!!!

[@Frankslaboratory]

Thanks ninja :D

[@triciaherrera211]

What packages in visual studio do I need to do install to follow along? I downloaded visual studio and that is about it.

[@robertobenedit]

fantastic!

[@Akas766]

great. From Bangladesh

[@Frankslaboratory]

Hi Hasan, greetings to Bangladesh

[@golibear6471]

thanku tarchar🙏🙏🙏

[@Frankslaboratory]

I'm here to help

[@gopinathkrm58]

Great as usual.

[@Frankslaboratory]

Thanks Gopinath and congratulations on your portfolio. Looks amazing

[@gopinathkrm58]

@@Frankslaboratory thank you so much

[@lucascecin]

amazing!

[@isithasathsara3847]

I love this video 😍😍

[@captsiro233]

Hello, I've been learning web development since September 2019 and I learn mostly from doing small personals projects which I build on my own or with only javascript.info or StackOverflow (recently I have finished the Snake game completely on my own) then I take the project to my teacher and he says what should have been written better or which part of code is written great. Then I rewrite the whole thing again. In terms of studying in classes, I mostly don't pay attention because I'm way ahead of my class and for them, I'm more like the second teacher to learn from. :)

[@Frankslaboratory]

Hi Siro, you are quite advanced since you say you have been learning only for 1.5 year, it helps a lot if you enjoy it, makes it easier to spend time learning. Looking forward to see what you build in the future, sounds like you will do great things. Nice to meet you man

[@captsiro233]

@@Frankslaboratory Thanks, do you have a Disord server?

[@user-ee7sd6lt7h]

Thanks for the great content

[@Frankslaboratory]

Hi D, thank you :D

[@arpitsinghrajput4940]

Best Vs code plugin for canvas and you used

[@Frankslaboratory]

Are you asking me which ones I use or do you want to suggest one?

[@arpitsinghrajput4940]

Yes

[@OchirBFolo]

This is awesome 🎊, so what happens if we use calculus instead of fibonacci 🤔

[@Frankslaboratory]

Hi Ochir, great question and only 1 way to find out. Time for me to do some experiments :D

[@OchirBFolo]

@@Frankslaboratory sure, take a care from covid-19

[@Frankslaboratory]

Thank you, You too. Stay safe ! :)

[@philsymartin5943]

is there any chance that we can get the code you are doing in this video?

[@marcelajaklova6560]

Hi! I discovered your channel 2 days ago and I have already learned a lot from you. Thank you for sharing your knowledge! I am trying to run the animation multiple times, but I can´t figure out why this code doesn´t work... setInterval(function animate(){ draw(); if (number > 500) { c.clearRect(0, 0, canvas.width, canvas.height); return;} requestAnimationFrame(animate); }, 1000);

[@Frankslaboratory]

Hi Marcela, I would need to see your entire code. I have never tried to use requestAnimationFrame inside setInterval. The point of requestAnimationFrame is to avoid setInterval actually. I can see what you meant to do there but not sure if code like this is allowed. If you want to draw lets say 5 different flowers like I did in the beginning of the video there is much simpler solution. If you are trying to run it over and over, where in the code are you calling clear interval and where are you resetting your number variable back to 0?

[@marcelajaklova6560]

@@Frankslaboratory Thank you for your reply! I am sure there is a better solution, but I can´t find it yet:). I think I want to run draw() again. Draw the flower, clear screen, draw again. The if statement in animate() clear the canvas. I have tried to put draw() in this statement, but it doesn´t work neither. It runs only once. const canvas = document.getElementById('canvas1'); const c = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; c.globalCompositeOperation = 'color-dodge'; let hue = Math.random() * 360; let number = 0; let scale = 10; let size = (Math.random() * 50) + 5; let variation = (Math.random() * 20) + 0.01; function draw(){ let angle = number * variation; let radius = scale * Math.sqrt(number); let positionX = radius * Math.sin(angle) + canvas.width / 2; let positionY = radius * Math.cos(angle) + canvas.height / 2; c.fillStyle = 'hsl('+ hue +', 100%, 50%)'; c.lineWidth = Math.round(Math.random() * 5); c.beginPath(); c.arc(positionX, positionY, size, 0, Math.PI * 2); c.closePath(); c.fill(); c.stroke(); number++; hue += 0.1; } function animate(){ draw(); if (number > 500) { c.clearRect(0, 0, canvas.width, canvas.height); draw(); } requestAnimationFrame(animate); } animate();

[@BitCloud047]

Hey Frank how long tell you got your first job as a front end developer?

[@Frankslaboratory]

Hi Aaron, I started very slowly with JavaScript in 2015 and got my first job in 2018. It can be done much faster, I also moved to a different country in the process which slowed me down :D

[@MDNannu-fw5mn]

Good job

[@Frankslaboratory]

Thank you MD

[@aswathyraj1414]

Thank you so much

[@Frankslaboratory]

Glad you liked it Raj 😊🤩

[@sakshikumari3620]

Hello, bro I was just going with a small project of Html Cavas and Vanilla Js. But Facing some error Can you please help me related to that please ? 😢 If yes, then how can I talk you with that?

[@Musfiq77]

thank you so much ...

[@Frankslaboratory]

Hi Samin, how are you. Glad you liked my video :)

[@Musfiq77]

@@Frankslaboratory can you make webgl tutorial using three js

[@devenpatel4684]

Thankx man

[@CivilThinking]

How to draw diagrams with mentioned dimensions in diagram. Like those diagrams in physics...

[@saranguru6100]

Hi ,How can we draw shapes based on mouse pointers dynamically..?

[@Frankslaboratory]

Hi Saran, if you mean specifically with this effect, just add angle value based on distance of mouse from center of screen for example, of based on it's x position. Make is a variable and tie it to current mouse value

[@bjmtahsinalishah4033]

i love it realy

[@Frankslaboratory]

Thank you Tahsin

[@travelingvibes7796]

Hi sir,, I m still waiting for carousel please please sir make the video on it like bootstrap carousel

[@Frankslaboratory]

Hi, thank you for reminding me it is still on my to do list. In the meantime if you want a good vanilla JavaScript carousel tutorial you can watch this video kzbin.info/www/bejne/rYi6f6V3g7OCZ80

[@Frankslaboratory]

This one is also good kzbin.info/www/bejne/jKialqCBrdF3gLM

[@tarun7617]

Ohhh !!! I really needed this !! Amazing (≧▽≦) thanks Franks !! Your epic 🙂

[@Frankslaboratory]

Hi Tarun, happy to hear that. Hope you have a great weekend :D

[@tarun7617]

Yes , I'm learning more about HTML and CSS ... Along with playing with some of my old code , for better understanding !! Soon I'll be learning about react and three.js -- and hopefully I could land my first job !! Moreover I'm not rushing anything ... Just taking my time and having fun

[@Frankslaboratory]

Take your time, quality over quantity. You are doing it right. React is not difficult if you are comfortable with vanilla JavaScript and understand object oriented and functional programming. The logic can get quite complex there so it's good to have solid coding basics down so you can focus on algorithms. React is amazing and you can do mobile games with it using just JavaScript (React native). Most companies require only simple React app for juniors. They expect you can pick it up fast if you understand vanilla JS.

[@igani6506]

I've gone through a lot of the tutorials on this channel and I'm just a bit lost on how to get the panel on the right (that displays everything). I'm using VSCode but I can't figure out how to get that view.

[@Frankslaboratory]

Hi, it's just a Google Chrome browser, it's not a part of VS code. I edit out browser panels to remove distractions

[@HOUSIENable]

Thanks ..

[@Frankslaboratory]

😍❤💪

[@thesuperyou2829]

amazingggggggggggggggggggg

[@Frankslaboratory]

Glad you like it

[@drinkfood6739]

😘

[@Frankslaboratory]

🥰

[@jeremymelix1935]

Neat

[@Frankslaboratory]

Thank you Jeremy :D

[@stephenkrus]

👑✨👌

[@humanexperience75]

I love Mathologer

[@Frankslaboratory]

Me too. He helped me understand many things

[@NIKHIL27B]

Thanks

[@Frankslaboratory]

Hi Nikhil, hope you're well

[@doctor9101]

I have done some code based on your videos will give you soon

[@Frankslaboratory]

Well done Sai, looking forward to see your projects soon :)

[@alwysrite]

trying to learn code daily !

[@helenefalk500]

Thank you Frank for all the wonderful videos. I have learned a lot from them and up voted them. For this video with the shapes, you can add in the HTML portion and then you will get a new random image every 30 seconds as the document reloads. Additionally, if you are interested in javascript graphics and pretty images using mostly vanilla javascript, I find the following sites interesting, codegolf.tk/ www.dwitter.net/ which both use a "function u(t)" in vanilla javascript. As well the following two people on codepen are certainly artists mostly using vanilla javascript codepen.io/Dillo/pens/public codepen.io/toshiya-marukubo/pens/public If you have any favorites of you own, please let me know. Thanks again.

[@Frankslaboratory]

Hi Helene, brilliant idea, I would use setTimeout to reload page periodically, didn't know it can be done in meta tag, I learned something new thank you. Thank you also for the links, going through them, it will keep me busy for a while. Happy new year !!! :)

[@ShayanBinShad]

Yes! I'm waiting for this! accidentally I'm the 100th viewer! 😅

[@Frankslaboratory]

Hi :) Thank you. 100th viewer must be a lucky number :) When are you releasing new video on your channel, are you working on new stuff or taking a break?

[@ShayanBinShad]

@@Frankslaboratory You got it right, I'm working on some new stuff and planning to release them next week. Sorry for the delay. I spent the last 2 weeks on random things. 😋 You know that I use my handmade video editor so I was making some changes and bug fixes to it. When I upgraded OS to Windows 10.1, I knew that I missed to add a hook for newer Windows so I had to made some critical changes. It's the 5.32.9-b release of it and I had a tough time to make those changes so I was late. There was a layer limit issue in the previous updates but hopefully it's now fixed so now I can add transitions and overlay texts over the video. Isn't that cool? 😄 Do you think that cutting, joining and editing a video from command line is a good idea? My friends call me 'crazy scientist' as I do so! 😅

[@ShayanBinShad]

@@Frankslaboratory I just discovered you on Twitter. 🥰

[@Frankslaboratory]

Hi. Well if you know how to create your video editor with transitions and overlay texts you are more advanced than me. Well done. That's really impressive. I tried to play with video once or twice and I found it very complicated. That's a skill that can get you a job on it's own. It does sound unconventional to edit videos from command line, it certainly is interesting. Looks like you enjoy coding experiments as much as I do. we have a lot in common :)

[@Frankslaboratory]

Nice, I will follow you back.

[@sigmiami]

Hi frank :)

[@Frankslaboratory]

Hi Sigmiami, nice to meet you