Highlight Graphics on the Canvas

Free HTML5 Game Tutorial for Beginners: Page 12

Overview Highlight Properties Highlight Functions globalAlpha fillStyle strokeStyle Create Highlights Tips Summary Source Code: Set Stroke Style Source Code: Draw Highlights
Highlight Icon

Overview

This tutorial demonstrates how to provide user feedback in the form of a visual highlight and outline. Highlights allow the player to see which game element they selected. When the player taps or drags a digit, the Surface Game outlines and highlights the digit.

It's especially important with mobile games to let players know which item's selected. Small display screens make accurate selection more difficult. Immediate feedback gives the player interactive control which makes the game more enjoyable.

This article explains how to highlight a graphic with an outline and overlay color. The Surface Game overlays digits with translucent blue. A translucent color shades the image underneath. For example the digits 1,3 and 2 in the graphic at the top of this page, are shaded with a 50% blue color overlay.

This article demonstrates how to use the 2D context properties fillStyle, strokeStyle, and globalAlpha. This lesson explains how to use the 2D context methods strokeRect() and drawRect().

Highlight Properties

  1. The globalAlpha affects colors drawn over other colors on the canvas. For example draw color A over color B. Color B is the base color. Color A is the overlay color. The globalAlpha property sets the amount of color to show through the overlay. globalAlpha represents the percentage of opacity of one graphic drawn over another.
  2. The strokeStyle property sets the border outline color.
  3. The fillStyle property sets the color, gradient, or pattern of graphical shapes. The color, gradient, or pattern to fill a shape is the fillStyle.

Highlight Functions

This section demonstrates use of two context API functions:

  1. strokeRect(nX,nY,width,height) creates a rectangular border starting at the point (nX,nY) on the canvas. The rectangle is as wide as the parameter width and as tall as the parameter height.
  2. fillRect(nX,nY,width,height) creates a filled rectangle starting at the point (nX,nY) on the canvas. The rectangle is as wide as the parameter width and as tall as the parameter height.

globalAlpha

The globalAlpha property sets the opacity level for future drawing operations. The globalAlpha property ranges in value from 0.0 to 1.0. A value of 0.0 represents 0% opacity. A value of 1.0 represents 100% opacity.

The term opacity indicates the level of transparency of a graphic. However opacity and transparency are opposites. An opacity of 100% means a graphic will not be transparent at all. Nothing under the graphic will show through. 0% opacity means everything under the graphic will show through. The graphic itself will be invisible.

For example the digits 1, 3 and 2 above, were originally drawn to the canvas with globalAlpha set to 1.0. Therefore 100% of the colors of the digits 1, 3 and 2 displayed on the canvas. Each digit graphic has a white background with blue text.

Then globalAlpha was set to 0.5, and a solid blue rectangle was drawn in the same location over digits 1, 3 and 2 individually. However the blue only shaded the digits by 50%. We can still read the numbers through the blue. The blue color shades the digits.

It could be argued digits receive low light rather than highlight. However the end result lets the player know which digit is currently active.

fillStyle

The 2D context's fillStyle property sets the color, gradient, or pattern for any subsequent calls to functions which fill an area. Assign blue to the fillStyle before drawing a rectangle over the digit you want to highlight. Assign context.fillStyle = "#0000ff"; to fill drawn shapes with blue. The number #0000ff represents blue in hexadecimal color notation. See the Hexadecimal Colors tutorial for more information

strokeStyle

The context's strokeStyle property sets the color for any subsequent calls to functions which stroke an area with a color. The strokeStyle property creates an outline or border. The following line of code assigns a stroke style of red.

context.strokeStyle = "#ff0000";

The digits 1, 3 and 2 above have a red outline.

Create Highlights

First assign a stroke style of red with the following line of code.

context.strokeStyle = "#ff0000";

Second call method strokeRect() to outline a rectangle with red. Third assign 50% global alpha with the following line of code.

context.globalAlpha = 0.5;

Fourth assign a blue fill color with the following line of code.

context.fillStyle = "#0000ff";

Fifth call method fillRect() to shade a rectangle with 50% blue.

The following listing combines fillStyle, strokeStyle, globalAlpha, strokeRect(), and drawRect(). Whatever displays on the canvas within the rectangle defined by nX,nY,w,h, will receive a red outline and blue shading.

context.strokeStyle = "#ff0000";

context.strokeRect(
 nX,
 nY,
 w,
 h
);

context.globalAlpha = 0.5;

context.fillStyle = "#0000ff";

context.fillRect(
 nX,
 nY,
 w,
 h
);
		

Tips

It's often a good idea to reset globalAlpha to the default 1.0 and fillStyle to the default black. The following listing demonstrates how to assign default settings to global alpha and fill style.

context.globalAlpha = 1.0;
context.fillStyle = "black";
		

Summary

This tutorial demonstrated how to provide user feedback in the form of a visual highlight and outline. Highlights allow the player to see which game element they selected. When the player taps or drags a digit, the Surface Game outlines and highlights the digit.

It's especially important with mobile games to let players know which item's selected. Small display screens make accurate selection more difficult. Immediate feedback gives the player interactive control which makes the game more enjoyable.

This article explained how to highlight a graphic with an outline and overlay color. The Surface Game overlays digits with translucent blue. A translucent color shades the image underneath. For example the digits 1, 3 and 2 in the graphic at the top of this page, are shaded with a 50% blue color overlay.

This article demonstrated how to use the 2D context properties fillStyle, strokeStyle, and globalAlpha. This lesson explained how to use the 2D context methods strokeRect() and drawRect().

Have fun and love learning! For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.