Pixel Effects with JavaScript and HTML Canvas – Tutorial

Wordpress sites

Learn how to implement pixel effects using JavaScript.

Make your website come to life with interactive animated logos or headers, or just practice fundamental JavaScript coding techniques with me on these fun examples. In this tutorial we will go from basics to advanced and create multiple different pixel effects with vanilla JavaScript and HTML canvas.

The tutorial starts with a simple beginner friendly project, where we analyze image for pixel data and use it to color shift the image and turn it into grayscale. Then we use that basic knowledge in a powerful way to create many different advanced animations with vanilla JavaScript and HTML canvas, completely from scratch.

⭐️ Code ⭐️
🔗Project 1 Smoke:
🔗Project 2 Rainbow:
🔗Project 3 Fire:
🔗Project 4 Particle text with liquid filter applied:

✏️ Course created by Frank Dvorak. Check him out on YouTube and Twitter.
🎥
🐦

⭐️ Course Contents ⭐️
⌨️ (00:00:00) Intro
⌨️ (00:00:55) Project 1 INTRODUCTION to pixel manipulation for beginners
⌨️ (00:02:30) How to bring image into HTML canvas project
⌨️ (00:05:15) How to analyze image for pixel data
⌨️ (00:11:58) How to turn image into grayscale
⌨️ (00:14:55) Project 2 BLACK AND WHITE PIXEL RAIN using image data
⌨️ (00:19:45) Particle system using JavaScript classes
⌨️ (00:25:18) Connect particle movement to pixel data
⌨️ (00:43:50) Project 3 PIXEL FLOW EFFECTS
⌨️ (00:53:12) HTML canvas gradients, filters and other experiments
⌨️ (01:04:48) Project 4 INTERACTIVE PARTICLE TEXT
⌨️ (01:13:50) Creating particles
⌨️ (01:21:33) Particle physics and mouse interactions
⌨️ (01:35:46) How to shape particles as letters
⌨️ (01:49:15) Constellations effect from particles.js with vanilla JavaScript

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

31 thoughts on “Pixel Effects with JavaScript and HTML Canvas – Tutorial”

  1. Thank you so much..and I must say You are amazing
    Never thought that anything like this is possible with just html and vanilla js

    1. Franks laboratory

      Thanks Shivam. Canvas can do a lot of things. Surprisingly not many people make content on it

  2. Salute to the master of canvas and JavaScript, the creative scientist, the one and only Frank and his Lab 😉😁💙💙 Amazing content Frank thank you!! And of course thanks to freeCodeCamp as well!! 🙂

    1. Franks laboratory

      Thanks man. Very kind of you to say. I like your stuff too as you know. It’s hard to find time in life sometimes to make YouTube videos so its nice to see some feedback. I’m still just a noob:)

  3. This guy is finally revealed by freecodecamp. It seems like his channel has been invisible to many people lol. I’m so happy to see a great guy like him get noticed.

  4. Sterling Velazquez

    I’ve implemented the text pixel effect in my code and it works beautifully, but how would I go about making the text more responsive in terms of changing the window size on desktop? I’ve used media queries in CSS and conditionals to check for specific window sizes in the JS file but when I change the font size of ctx.font, it doesn’t change. On resize, I tried cancelling the animation, reinitializing, and calling animate again, but that didn’t work either. How would I properly update the font size for resizing the window?

    1. Franks laboratory

      Hi, there are multiple ways to achieve this. With more complex effects like this some hand tweaking is usually required. I would first check screen size with JavaScript and then pass the effect a set of initial values to make it work for certain range of screen sizes. That way you could create let’s say 4 carefully calibrated hand made pre-sets, and then based on what screen size user loads the website on (or when resize event is triggered), it would just choose one of them. I’m sure people with more JS experience can think of even cleaner solutions. I’m self taught so I am not an expert by any means.

  5. 1:32:00 when we do dx = mouse.x – this.x, the velocity vector is pointed from the particle to the mouse. This is the reason why particle is moving TO the mouse. I think instead of editing line 53 and line 54, changing line 42 and line 43 makes more sense.

  6. 1:51:05 In the second for loop(line 96), I think we should put “for( let b = a + 1; b < ......)", because if b = a, and b fit the condition, we will get distance = 0, which I think will lead to draw a line at same position.

    1. Franks laboratory

      Good point, thank you for sharing I will note that next time, I use this technique a lot

  7. Sandy Bathwater

    This is good stuff! Once you have that bitmap data, the sky is the limit. 🙂

    1. Franks laboratory

      Indeed, I am working on other effects using pixel data, got some new ideas 😀

  8. Hello, Frank, amazing video, do you have any video/class or site where i can learn more abount the sin,cos functions, or the trigonometry basics?

    1. Franks laboratory

      Hi Jesus, I speak a little bit about sin/cos in my latest game animations video, but haven’t made a specific video for this topic yet, i will make one

  9. Really, really great tutorial. Never ventured into canvas, but with your explanations, it made perfect sense. I definitely have new tools to play with now! Thanks!

  10. Girard Aquino

    I’ll pause to comment. The level of explanation is perfect for me. It gives you the advanced and difficult parts like you mention, but being reminded of the basics as I process everything really helps to tie things together because it triggers already existing knowledge and bring those to awaremess.

    1. Franks laboratory

      Hi Girard, thank you for such a nice feedback, glad to see you found my explanations helpful

  11. Yefri Encarnación

    thanks for everything! . I really pass from beginner to advance(well, i can say that i have an advance level, but i learn how to do some crazy stuff) thank you so much!

  12. 10 minutes in and I’m learning how to mathematically turn RGB pixels into grayscale

    it’s fascinating even if i’m not a web dev

  13. Гаджега Павло

    for particles speed in “Connect particle movement to pixel data”, a better formula for movement is this.velocity * (1 – this.speed/255)**n.

    when n = 0+
    255 is ’cause the max value of brightness is 255

  14. Love how you made it look like a fire burning FX at 1:03:44
    EDIT. ok as soon as i commented you said it yourself 🙂 well goes to show you’re already there

  15. Andrew Sharpe

    This is a suggestion aimed mainly at more advanced programmers, but your getRelativeBrightness function is a perfect candidate for memoization. At the very least you could have a sort of guard clause for black which returns 0 without the calculations.

  16. Hi Frank. Very appreciated your tutorial. You are great.
    Do you have some book about topics like that?. Or even developed animation?.
    Thanks a lot!

Comments are closed.