Friday , 21 September 2018
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

Audio

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.

ULTIMATE NODE JS WITH SQL COURSE
Want to learn how to create web applications with Node.js and SQL? Check out my course!
Get 93% off my course. You'll also learn how to build real world applications using Node and SQL. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link