Styling particles with the HTML5 canvas

Three.js offers three different ways you can use an HTML5 canvas to style your particles. If you use THREE.CanvasRenderer, you can directly reference an HTML5 canvas from THREE.SpriteCanvasMaterial. When you use THREE.WebGLRenderer, you need to take a couple of extra steps to use an HTML5 canvas to style your particles. In the following two sections, we'll show you the different approaches.

Using HTML5 canvas with THREE.CanvasRenderer

With THREE.SpriteCanvasMaterial, you can use the output from an HTML5 canvas as a texture for your particles. This material is specifically created for THREE.CanvasRenderer and only works when you use this specific renderer. Before we look at how to use this material, let's first look at the attributes you can set on this material:

Name	Description
color	This is the color of the particle. Depending on the specified blending mode, this affects the color of the canvas image.
program	This is a function that takes...