It might be best to start out with a linear gradient so in this section I will be doing just that. I start out making a canvas element, and getting a drawing context just like any other canvas example. Once I have a drawing context to work with I can call the create linear gradient method of the drawing context. When I do so I will want to pass a starting point and end point of the linear gradient.
After calling the create linear gradient method I will end up getting a gradient object as a product that is returned by calling the method to which I will want to store in a variable. I can then call the add color stop method of that gradient object to set the colors for the gradient by passing the percentage of the linear gradient at which the given color will stop from the beginning or another color stop as the first argument followed by the desired color as the second argument. Once that is done I can then use the gradient as a style for setting the fill and stroke colors.
Simple linear gradients are fine but what about gradients that change in all directions from a fixed point? Well when it comes to working with what there is with the 2d drawing context alone there is another type of built in gradient to work with so lets take a look at that for a moment next.
On top of a simple linear gradient another option is to have a radial gradient. This gradient constructor takes six arguments which are two sets for x y and radian values for two circles that are used to make the gradient. Aside from that it can be used in more or less the same way as a linear gradient when it comes to adding color stops, and using it as a style.
I wrote a post on using the get image data 2d drawing context method, in there I also touched base on the image data constructor and the put image data method. These canvas methods are the standard way to go about working out some logic for drawing something on a pixel per pixel basis. For the most part the built in methods for working out gradients will work just fine, but if I want more control I just have to work out something that will be used to generate image data.
When working out the values for the elements of the array I need to think in terms of multiples of four elements when it comes to the red, green, blue, and alpha channels. When looping I can use the distance formula, or any other logic to help with the process of defining what the gradations of color will be.
This example results in a kind of color gradient that is similar to that of the radian color gradient. The dereference of course thorough is that I can tweak the logic that defines the gradation f color any way I see fit.
4 - Check out my canvas example of a grid gradient where I am using custom logic to create a gradient effect
I have started a whole series of canvas example posts where I am writing about full canvas examples of sorts rather than simple copy and past code examples. One such post is on a grid gradient type thing that came out pretty good that involves a plug-in system and I like they way it came out.
So far it is one of several projects in my canvas example series that I come back to now and then.
Plain old canvas gradients are okay for just quickly painting a gradient, but it takes away from the run of diving deeper into the math that is involved behind them. This is something that I have been toying with for years when it comes to just experimenting and letting my mind flow. There are many ways to go about creating custom gradient like effects where some kind of interesting and novel logic is used to set the color values for a whole bunch of pixels.