Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
One of the most exciting additions that HTML5 offers to designers is the ability to draw free-form graphics on a drawing surface known as the Canvas. In this course, author Joe Marini introduces the technical concepts behind Canvas and shows how to perform drawing operations directly in a web page. The course covers drawing basic and complex shapes, setting colors and styles, adding shadows, patterns, and gradients, more advanced techniques such as scaling, rotating, and compositing objects, and how to incorporate Canvas elements in a slideshow and an animation.
In this section we're going to talk about the canvas compositing methods and the global alpha setting. The canvas context has a setting for what's called the global alpha, and that's the opacity setting that affects all of the drawing operations that happen on the canvas. There's also a setting for what's called the default compositing method, and that affects how new content is drawn onto the canvas surface and how it is potentially affected by the content that's already there. Now, to use the global alpha, you simply set the context.globalAlpha property to a value from 0.0 to 1.0.
The default being 1.0, which means full opacity. Now there are 12 different compositing methods, and I've illustrated them here for you to look at. The first is called source-over, and this is the default. Basically, what that means is every time you draw something new, it gets drawn on top of what's already there, which is pretty much the behavior you'd expect. Each time you draw a new shape, you'd just expect it to appear on the canvas, on top of everything that came before it. The next one is source-in. You can see that what's happening is the drawing is only taking place where there's already content on the canvas.
So in this case, the green rectangle is only showing up where there are already portions of the blue rectangle. Source-out is just the opposite. The newly drawn object, the green rectangle, is only showing up where the blue rectangle is not, where they don't overlap. The source-atop is kind of like source-in, except that it leaves the original content in its place. The source-in left only the new content; source-atop leaves the old content plus the intersection of whatever the new content was.
The lighter compositing method takes a look at the intersection of the new content and the old content, draws the pixels in a lighter color of what they would have been normally. The xor or exclusive or drawing operation, or compositing method, takes the new content, intersects it with the old content, and then clears the area where the two overlap. The second row shows some other operations. The destination-over is kind of like source-over, only that the new content is drawn, but it's clipped by what's already there.
Then there's destination-in, which is kind of the opposite of source-in. In this case, only where the two overlap is the content drawn, but the new content is left out and the old content is kept. In destination-out, that's the opposite of destination-in, so wherever the two don't intersect, that stuff is left, but all the other content is removed from the canvas. Destination-atop is the opposite of source-atop. In this case, the new content is kept, along with whatever the old content was, as long as it intersects with the new content.
Darker basically says draw the new pixels but make them darker instead of lighter. And then copy means just draw the new content; anything that was already on the canvas is removed and only the new drawing operation is what wins. So let's go over to the code and see these in action. So here I am in the code and on the snippets I've got my Global Alpha snippet. So let's go ahead and copy this over. First, I want to copy a bunch of definitions, and what I'm going to do is paste that in here.
Okay, so I've got my globalAlpha. It starts off at 1.0, and that's the default value, but we're just going to set it anyway for purposes of illustration. Then I have an array of rectangles. So, I've got 1, 2, 3, 4, 5, 6, 7, I've got 8 rectangles all defined at different locations. They overlap each other. So let's go ahead and get to drawing. I'm going to copy that in. So this for loop will loop over this array of rectangles and draw each rectangle on the canvas.
So for the moment, I'm going to comment this line out. So you can see that the rectangles are being drawn. There's a blue one and a red one. I'm drawing them down the canvas here. So let's go put that line back in. So each time through the loop, the globalAlpha is going to be reduced by 0.3. So let's see what effect that has. The opacity changes, for each time through the loop and the drawing operations get lighter and lighter. Just to make sure that that works cross browser, let's go ahead and open this up in. let's say Firefox. Sure enough, it works.
Now, let's take a look at some compositing operations. So I'll go to my snippets and here's my Compositing example. Copy this and paste it in. So one of the things that I want to point out here is that because some of these drawing operations affect the current canvas content, what I've done is made a whole row of separate canvases to show each example. So I've got two rows of six canvases, each one is 150 x 150, and we're going to draw in each one of those guys.
So here are all the compositing methods as strings--source-over, source-in and so on. All 12 of them are there. I've got two rectangles, and each one of these rectangles is going to be drawn in each one of the canvases. So, I have an index variable that's going to keep track of what compositing method we're currently drawing, and then I have a loop. So I'm going to start at 0, loop over the array of compositing methods. Each canvas is identified by the name canvas + an integer.
So you can see there is canvas1, canvas2, canvas3. So I'm going to get each canvas, get its drawing context, and draw two rectangles: one blue and one green. So I'm going to draw the first rectangle, then set the composite operation right there, to whatever the composite method is, and then fill the second rectangle. So let's go ahead, save this. Let's go back to the folder here, fire up compositing_start. You can see that each one of the rectangles is being drawn, and we are getting the same results for the compositing method as I showed in the slides.
Let's go over to Firefox and see how it looks there. It looks pretty good. And just for good measure, let's try it out in Chrome as well. Looks right. So in this example, we saw how to use compositing methods, we saw how to use the global alpha to affect drawing operations, and we can see how we can draw content onto the canvases using a variety of methods that affect the source and destination content.
There are currently no FAQs about HTML5: Graphics and Animation with Canvas.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.