Uploaded August 2021 | Updated September 2026, 2 weeks ago
Drawing stars, polygons and triangles with vanilla JavaScript and HTML5 canvas can be easy. Let me show you my favourite technique. In this tutorial we will write a single function that can draw 100 different shapes. We will learn how to rotate shapes using built in HTML canvas methods save(), restore(), translate and rotate() and we will learn everything we need to know about drawing lines and shapes with beginPath(), moveTo() and lineTo() methods. All of that with plain vanilla JavaScript with no frameworks and no libraries. We are here to create cool things, but we also want to learn how things work under the hood and really understand the code. We will also use that knowledge to create multiple creative coding projects (generative art paint brush). Join me and let's draw 100 different shapes with JavaScript. Have fun ❤
⭐️TABLE OF CONTENT ⭐️
00:00 Creative coding examples
01:32 HTML and CSS project setup
02:00 HTML canvas setup
02:42 How to draw a line on canvas
06:58 HTML5 canvas translate, save and restore methods
09:41 How to use rotate method to draw a shape
12:50 How to draw a star shape on canvas
20:19 JavaScript mousemove event
21:48 HTML canvas shadows
22:46 Rainbow colors with HSL color declaration
24:56 JavaScript mousedown and mouseup events
25:41 Global composite operation property
27:46 Orbiting effect
28:46 Creative coding experiments
❤ Related Links ❤
Beginner playlist: youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
HTML canvas rotation: youtu.be/TBXjWsR7XDA
🔥 I really like these FRONT END WEB DEVELOPMENT courses on Udemy 🔥
☕ JavaScript: The Advanced Concepts (2021) bit.ly/2Uk6Wyk
Learn modern advanced JavaScript practices and be in the top 10% of JavaScript developers. (Andrei Neagoie)
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) bit.ly/37Hlxqq
Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource in 2021. (Maximilian Schwarzmuller)
☕ The Complete JavaScript Course 2021: From Zero to Expert! bit.ly/3fXGwaZ
The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one! (Jonas Schmedtmann)
☕ 20 Web Projects With Vanilla JavaScript bit.ly/3anlCQR
Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries, Brad Traversy)
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) bit.ly/3fWJgWk
🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) skillshare.eqcm.net/c/2793559/1085653/4650
🔥 My favourite computer screen for coding amzn.to/3xccARd
🎮 HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
Drawing stars, polygons and triangles with vanilla JavaScript and HTML5 canvas can be easy. Let me show you my favourite technique. In this tutorial we will write a single function that can draw 100 different shapes. We will learn how to rotate shapes using built in HTML canvas methods save(), restore(), translate and rotate() and we will learn everything we need to know about drawing lines and shapes with beginPath(), moveTo() and lineTo() methods. All of that with plain vanilla JavaScript with no frameworks and no libraries. We are here to create cool things, but we also want to learn how things work under the hood and really understand the code. We will also use that knowledge to create multiple creative coding projects (generative art paint brush). Join me and let's draw 100 different shapes with JavaScript. Have fun ❤
⭐️TABLE OF CONTENT ⭐️
00:00 Creative coding examples
01:32 HTML and CSS project setup
02:00 HTML canvas setup
02:42 How to draw a line on canvas
06:58 HTML5 canvas translate, save and restore methods
09:41 How to use rotate method to draw a shape
12:50 How to draw a star shape on canvas
20:19 JavaScript mousemove event
21:48 HTML canvas shadows
22:46 Rainbow colors with HSL color declaration
24:56 JavaScript mousedown and mouseup events
25:41 Global composite operation property
27:46 Orbiting effect
28:46 Creative coding experiments
❤ Related Links ❤
Beginner playlist: youtube.com/playlist?list=PLYElE_rzEw_v8TXJ_ITSSBP_ypUKfQ7K-
HTML canvas rotation: youtu.be/TBXjWsR7XDA
🔥 I really like these FRONT END WEB DEVELOPMENT courses on Udemy 🔥
☕ JavaScript: The Advanced Concepts (2021) bit.ly/2Uk6Wyk
Learn modern advanced JavaScript practices and be in the top 10% of JavaScript developers. (Andrei Neagoie)
☕ JavaScript - The Complete Guide 2021 (Beginner + Advanced) bit.ly/37Hlxqq
Modern JavaScript from the beginning - all the way up to JS expert level! THE must-have JavaScript resource in 2021. (Maximilian Schwarzmuller)
☕ The Complete JavaScript Course 2021: From Zero to Expert! bit.ly/3fXGwaZ
The modern JavaScript course for everyone! Master JavaScript with projects, challenges and theory. Many courses in one! (Jonas Schmedtmann)
☕ 20 Web Projects With Vanilla JavaScript bit.ly/3anlCQR
Build 20 mini frontend projects from scratch with HTML5, CSS & JavaScript (No frameworks or libraries, Brad Traversy)
☕ HTML/CSS Bootcamp - Learn HTML, CSS, Flexbox, and CSS Grid bit.ly/3tu9ghD
☕ JavaScript Basics for Beginners (Mosh Hamedani) bit.ly/32Tn5wq
☕ Modern JavaScript From The Beginning (Brad Traversy) bit.ly/3fWJgWk
🔥 One Month FREE Trial of Skillshare Premium! 🔥 (access to all courses, cancel anytime) skillshare.eqcm.net/c/2793559/1085653/4650
🔥 My favourite computer screen for coding amzn.to/3xccARd
🎮 HTML5 canvas and JavaScript game tutorials:
youtube.com/playlist?list=PLYElE_rzEw_sowQGjRdvwh9eAEt62d_Eu
If you feel more confident in your coding skills, check out some more ADVANCED ANIMATIONS with vanilla JavaScript & HTML5 canvas:
youtube.com/playlist?list=PLYElE_rzEw_siuo-kkHh5h7Sk--6IPYNh
Let's be friends
👍 You can message me on TWITTER twitter.com/code_laboratory
👍 Check out some of my source code on CODEPEN codepen.io/franksLaboratory
Music: (YouTube audio library) Vacay In Fiji Riddim - Konrad OldMoney, World Map - Jason Farnham
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
