Shadow within: Canvas - Course HTML 5 - an introduction of the new web language - Lesson 3 | web Developer courses

Duration:  18 minutes

Summary: In this video, we discuss creating text shadow within a canvas. As usual, we start by creating a canvas, retrieving it by id, and getting its 2d context. We need to save the current context and restore it when done so our later changes will not be impacted by the current changes we are making to the context. Then, we start manipulating the context properties. We change the font and the fill style. We choose to center the text, and (0,0,0) for the RGB. The alpha value is between 0 and 1. This specifies how strong the shadow will show. The higher the number, the stronger is the shadow. We chose 0.2 in our case. Then, we selected the offset for the shadow’s (x,y) coordinated. Since the shadow is behind the actual text, the y value is negative. Finally, we select the shadow blur and the text to display. We test out HTML changes using Firefox.

Technology Used: HTML 5 - Introduction

Keywords: HTML 5, Canvas, getElementById, document, getContext, save(), restore(), font, fillStyle, textAlign, shadowColor, shadowOffsetX, shadowOffsetY, shadowBlur, fillText.