Help understanding canvas

[Eugene Rayner]

Hello there,

 

I've recently been exploring ways to create awesome animations and i've come across the 'canvas' element.

Now i've been looking at some articles which explain which frameworks or libraries exist out there to assist in creating animations on canvas.

But it's 2017 now - Almost 2018, what is the best framework I can use for the broader use of Canvas? I'd like to create some cool parallax backgrounds, or multilayer which move on scroll, for now anyway.

 

As always, any help greatly appreciated

[Carl]

I think most folks around here are going to recommend Pixi.js for 2D and Three.js for 3D. Both work great with GSAP.

 

For a little background on Canvas, please see this post that @osublake was kind enough to turn into a multi-part tutorial on the subject

 

 

We have  PixiPlugin for advanced color effects: https://greensock.com/?product-plugin=js-pixiplugin

[OSUblake]

Canvas has a huge learning curve if you've never done graphics programming before, so it's probably better to start off using a 2D library like PixiJS.

 

Check out their examples page to get an idea of what the library is capable of.

http://pixijs.github.io/examples/#/basics/basic.js

 

There's also a bunch of plugins for Pixi, like filters...

http://pixijs.github.io/pixi-filters/tools/demo/

 

And particles...

http://pixijs.github.io/pixi-particles-editor/

 

Here's a simple demo using GSAP's PixiPlugin.

 

See the Pen qmXPMm by osublake (@osublake) on CodePen