Monday , 20 November 2017
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.

Alpha

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.

Composition

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.

WebGL

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.

http://learningwebgl.com/blog/

Conclusion

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

http://www.w3.org/html/wg/drafts/2dcontext/html5_canvas/

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

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

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link