Rainbow Advanced Effect Tutorial

Create a Rainbow with HTML5 Gradients.

Rainbow on Blue Example Rainbow with Background Example Introduction to Radial Gradients Tutorial Advanced Rainbow Overview Add the Background Image Draw the Rainbow Masks to Soften Edges Tips Summary Rainbow HTML Markup Rainbow JavaScript Rainbow CSS Source Code Page

Advanced Rainbow Overview

Learn to place procedurally generated rainbows over a photograph with masks and transparency. Tap an image above to see beautiful rainbow examples. Apply HTML5, radial gradients, and linear gradients with a mask and alpha transparency. If you're unfamiliar with radial gradients see the introduction to radial gradients tutorial. Also see the beginner's guide to preparing rainbows. This tutorial explains how to use masks and alpha transparency over a photograph for more realistic rainbows.

Add the Background Image

First load a background Image. After the background Image has loaded, then create and display the rainbow with masks.

Before displaying the rainbow set the globalAlpha property to 0.5. A value of 0.5 reduces the rainbow's opacity by 50%. Now 50% of the background image shows through the rainbow. The following function executes after the image loads.

imgBG.onload = function() {  

// Display the background graphic:
ctx.drawImage(
 imgBG,
 0,
 0,
 N_DIM,
 N_DIM
);

// The background color:
var sBgP = "rgba(141,193,250,";

// Reduce opacity:
ctx.globalAlpha = 0.5;

// Create the rainbow:
drawRainbow(
 sBgP
);
  
// Soften edges of the rainbow:
drawMasks(
 sBgP
);
};   
 

Rainbow Effect

The rainbow effect was generated with colors of the rainbow as they appear in order. However indigo was left out to simplify rendering. Create a full circle radial gradient. Colors fade from the background color, to red, yellow, and blue, then back to the background color.

Translate the canvas to move the rainbow gradient toward the right and down. Variable N_DIM represents the square width and height of the canvas. The following listing moves the gradient right (N_DIM/16) and down (N_DIM/32).

ctx.translate(
 N_DIM/16,
 N_DIM/32
)

Moving the radial gradient effectively crops the bottom and right side. Function drawRainbow() creates a radial gradient with stop colors which look like a rainbow. See the entire drawRainbow() function.

Masks to Soften Edges

Code creates and displays masks with linear gradients. The masks soften edges of the rainbow as it appears to touch the ground and sky.

When creating the mask, reset the canvas's matrix with a call to ctx.setTransform(1,0,0,1,0,0). If not reset, the mask will also display farther down and to the right.

Create linear gradients much the same as radial gradients. Create the gradient with parameters for the x coordinate, y coordinate, width, and height. The direction of the gradient is determined by the width and height parameters. If only a width parameter is supplied, then colors vary from left to right. If only the height parameter is supplied, then colors vary from top to bottom. If both width and height are supplied, the colors vary on an angle, based on the ratio between width and height.

The following listing demonstrates creating a linear gradient located at (xCoordinate,yCoordinate). The gradient flows based on the ratio between width and height parameters.

ctx.createLinearGradient(
 xCoordinate,
 yCoordinate,
 width,
 height
)

See the entire drawMasks() function for details.

Tips

Gently fade from one color to the next. Select colors with an image editing application such as Photoshop. However in most photographs red, yellow, and green appear to occupy more space on the rainbow. It can be a little tricky to modify the appearance of color transitions precisely.

Experiment with radial gradients to provide a very wide array of effects. See radial gradient examples below for ideas. Try various colors, stops, and settings, to discover new effects.

Perhaps the most compelling effects are generated with animated color gradients. However be careful. Many mobile devices slow down when processing multiple animated gradients.

Reuse Code

This example uses the drawRainbow() function for the simple rainbow and landscape with rainbow examples. Code reuse speeds up development and debugging time.

Summary

This tutorial explained how to place procedurally generated rainbows over a photograph with masks and transparency. Tap an image above to see beautiful rainbow examples. Apply HTML5, radial gradients, and linear gradients with a mask and alpha transparency. If you're unfamiliar with radial gradients see the introduction to radial gradients tutorial. Also see the beginner's guide to preparing rainbows. This tutorial explained how to use masks and alpha transparency over a photograph for more realistic rainbows. See below for more radial gradient examples.

Radial Gradient Examples

Copyright © 2015 Seven Thunder Software. All Rights Reserved.