The global alpha property of the 2d drawing canvas context is maybe the most common typical way to go about setting transparency for something that is going to be rendered in canvas. Just set a value from zero to one for the property and anything that will be drawn or stroked will have that degree of transparency.
This can be useful if I want to set a canvas alpha channel transparency for everything that I end up drawing to the context, rather than just having it apply to a stroke or fill style and not everything else like draw image calls.
When done set the value back to one, or use save and restore to set opacity back to what it was before hand.
A css color data type value can also be used to set an alpha-channel transparency value using the RGBA functional notation for example. This way it is just a matter of me setting the desired color value when setting the fill or stroke style when making graphics with the 2d context drawing methods, then just draw what I want to have a canvas alpha transparency with that style.
This will of course only work with paths that are drawn with 2d canvas drawing context method calls. So when it comes to drawing images from an external file, Image Data, or another canvas element as a way of rendering to the canvas I am still going to want to use an alternative means of alpha channel transparency. The global alpha property could again be one way to set a global transparency value. However there is also the source images themselves of course and if they have any transparency values.
Now it is time to have some fun with global alpha and make a real canvas example that does something interesting. I went a little overboard with this one, but it was worth it the canvas example looks pretty cool. It has a feature where each circle has an alpha property which is set by the distance from the center of the canvas. So as the collection of circles moves around the canvas the transparency will become opaque as they move closer to the center and more transparent as they move away from it..
Here I have the circles.js file that I use to create a state object, as well as update that state object with the two public methods that it returns to the global variable that it appends to. If of course contains a whole bunch more additional internal methods that all aid with the process of creating and updating a state object which contains an array of circle objects.
Another cool feature of this canvas alpha examples circles.js file is the forTicks array. Each circle has a for tick index number that corresponds with one of these methods that will update the heading of the circle based on the logic of the current method in that array. I could do way more than just change the headings of circles in one of these methods, but for now I just did that to make the movement a little more interesting. There is also a for tick life property that is used as a way to change the for tick index value in the main update method.
I will need a way to draw the state of one of my circles.js files state objects to the canvas. So here is the draw module that will do just that. I included a gradient method to make a background that is a little more interesting then just my usual plain black background. The of the method to draw the background, and of course a method to draw the current state of all my circle objects.
The draw circles method uses the global alpha property to set the global alpha value of the drawing context to the current circle. Once all the circles are drawn I the make sure to set global alpha back to the default of 1.
time now to tie everything together with a main.js file and a little HTML. In my main.js file I create a circles.js state object with my create public method. I then also call the set gradient method of my draw module passing the state object to set up the gradient background for the state object. I then have a simple app loop in which I am drawing the background, the circles, and then updating the state object.
The html then looks like this:
When this canvas example is up and running it is pretty cool to look at. A whole bunch of circles moving all over the place in all kinds of interesting ways. Of course the transparency of the circles changes depending on the circles location relative to the center of the canvas. I could put more time into it, making a more interesting form of my for tick methods, but I all ready spend way to much time on this one.
So there are some basics when it comes to working with canvas alpha transparency, there is much more to write about on this topic when it comes to other aspects of canvas relating to alpha channel transparency as well as transparency in general. For example there are the various values that can be assigned to the Global Composite Operation property that I have touched base on in my post on canvas clip.
There is also of course the nature of PNG files that support an alpha channel, external assets like this can be added to projects and then drawn to the canvas using the draw image method. There is also working with raw image data and the use of alpha channels there.
Still for the most part this post was just on the global alpha property, and for that alone there is only so much to write about in time I might expand this post on canvas alpha transparency in general, but for now this is all.