Tuesday , 18 June 2019
Home / Programming / JavaScript / Global Properties – Advanced JavaScript Tutorial
Global Properties
Global Properties

Global Properties – Advanced JavaScript Tutorial

There are 2 global properties you can use to apply to your drawings. This the alpha and composition properties. They can truly effect the outcome of all your drawings.


Clear your script and add this bit of code.

In the example above, we draw a rectangle with the default settings. Next, we change the globalAlpha property. This property holds the value for the alpha/opacity of all drawings. By default, this is set to 1. If you would like your drawings to be fully opaque, then set it to 1. If you would like a completely transparent drawing, then set it to 0. If you would like something in between, then input a number between 0 and 1. In our example, we set it to half transparent which is 0.5.

Lastly, we change the fill color and then draw another rectangle on top of our first rectangle.


The composition is how drawings affect one another. By default, if you draw a new drawing on top of another, then the new drawing will just appear on top and not change the original drawing in any way. Let’s learn how to manipulate this procedure.

Clear your script and add this bit of code.

Here we introduce a new property called the globalCompositeOperation. This property can have a variety of values which are all strings. The default value is source-over which just draws drawings over one another.

Here’s a list of all values possible.

  • source-over – Drawings are drawn over each other.
  • source-in – New drawings are only drawn over existing images/drawings. Everything else becomes transparent.
  • source-out – New drawings are only drawn outside of an existing image/drawing. Everything else becomes transparent.
  • source-atop –  New Drawing is drawn only where it overlaps the existing image/drawing. The existing image isn’t affected if it isn’t drawn over.
  • destination-over – New drawings are drawn underneath existing drawings.
  • destination-in – New drawings are drawn underneath existing images and anywhere else becomes transparent.
  • destination-out – New drawing erases the existing drawing where they overlap.
  • destination-atop – New drawing is drawn behind the existing image. The parts the images don’t overlap the existing image is transparent.
  • light – Both drawings combine properties to create a light image.
  • copy – The new drawing completely erases the new drawing. This replaces the existing drawing.
  • xor – The images are combined with a method called XORing.

In our example, we apply the property after the first rectangle is drawn. It’s important you do this as the canvas is considered a drawing itself. So, certain effects can be unwanted.

There are so many values, it’s recommended you experiment with each of them. It’s also important that you test this on various browsers as each browser implements each effect differently.


Another context is the WebGL context. However, we will not be talking about this context for a couple of reasons. For one, WebGL is not standardized by W3C. The WebGL context is not supported properly in all browsers and is deactivated by default for some web browsers such as Safari. It’s still in the works so when HTML5 is released, that does not mean the WebGL context is ready to use. Not only that, WebGL is a tutorial series in itself. There are so many things to learn it would take a whole book to cover it all. If you would like to learn WebGL ,then go here.



We’ve pretty much finished talking about the 2D contest.For more information on the 2D context, then check out this link.


About Jasko Koyn

Check Also


Audio – Advanced JavaScript Tutorial

The video and audio objects both have the same events, properties and methods. So, you …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.