Monday , 20 November 2017
Home / Programming / JavaScript / Shadows – Advanced JavaScript Tutorial
Shadows
Shadows

Shadows – Advanced JavaScript Tutorial

Shadows are a great way to make your 2D drawings pop out. They’re very easy to set up and you’re given a couple properties to get you started.

Clear your script and add this bit of code.

In the above example we use the 4 main shadow properties and draw a green rectangle onto the canvas. Let’s focus on the 4 properties introduced here.

  • shadowColor – This property allows you to change the color of the shadow. This can be written in hex code, name, RGB, RGBA, HSL, and HSLA.
  • shadowOffsetX – This property defines how far from the drawing should the shadow be via it’s x position.  This is measured in pixels. The shadow’s origin point is relative to the drawing’s x coordinate.
  • shadowOffsetY –  This property defines how far from the drawing should the shadow be via it’s y position.  This is measured in pixels. The shadow’s origin point is relative to the drawing’s y coordinate.
  • shadowBlur – This property defines how blurry the shadow should be. This is measured in pixels. If you would like no blur, then set this to 0 or don’t even set it at all.

Try opening your document and you should see our shadow now.  A couple of things to know. In Safari, the shadow will not appear for gradients. We’ll learn more about gradients in the next tutorial.

You should also know that these properties will apply to all drawings created. So, it’s always a good to reset these properties to the default value by using the save() and restore() methods.  By default, the shadow color is black, the offsets are 0 and the blur is also 0.

Conclusion

All properties are supported in all major browsers and on mobile devices. For more information on shadows and canvas, then go here.

http://www.w3schools.com/tags/ref_canvas.asp

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