Toptube Video Search Engine

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