Particle Text with Vanilla JavaScript

From drawing a single letter to multiline animated particle text. In this HTML canvas crash course we will go from basics to advanced in a single video. We will cover everything you need to know about using FONTS and drawing TEXT on HTML canvas. Let's explore what's possible in modern front-end web development and turn text into complex animated particle systems. Have fun! :)

This technique will also work with company LOGOS, even if the logo is a combination of text, symbols and images.

EXTENDED version available here:
- contains a bonus lesson to convert the codebase in particle CONSTELLATIONS effect.
- also includes the full source code and many experimental codebases as shown in the intro: https://www.udemy.com/course/learn-html-canvas-advanced-text-effects/?referralCode=4C5821D2D04048CC4A01

Also available on Skillshare: (1 free month using the link below)
https://www.skillshare.com/en/r/profile/Frank-Dvorak/507488567?gr_tch_ref=on&gr_trp=on

Today we will learn how to:
? Draw text on canvas using built in fillText and strokeText methods
? Wrap multiline text (measureText method)
? Apply custom canvas gradients to strokeStyle and fillStyle
? Convert any text into an iteractive particle system
? Add physics, animated transitions and mouse interactivity
All of that with no frameworks and no libraries using just vanilla JavaScript, HTML5 canvas element and object oriented programming. I will explain every line of code step by step as we build our interactive animated project. Let's make art with code and learn JavaScript and front end web development in the process.

⭐️Tutorial Contents ⭐️
00:00:00 Vanilla JavaScript Pixel & Particle effects
00:00:41 Project setup
00:02:45 CSS3 & JavaScript positioning tricks
00:05:09 Drawing, styling and positioning text on HTML canvas
00:14:40 Wrapping and centering multiline text on HTML canvas
00:26:44 How to center a block of text vertically
00:30:27 HTML5 canvas gradients
00:33:17 Refactoring into object oriented JavaScript
00:45:33 Scanning canvas for pixel data
00:57:18 Converting text into particles
01:07:57 Interactions and physics
01:14:26 Custom fonts
01:18:24 Resizing and responsive design

More vanilla JavaScript pixel manipulation tutorials:
https://youtube.com/playlist?list=PLYElE_rzEw_t0--arG7_fu1uqkwOht1Jg

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