In this section, we will utilize the cache method with Bitmap and AlphaMaskFilter to develop a reflection effect in EaselJS. The target is to load an image and create a Bitmap class to draw the image. Then, clone the Bitmap image, change the rotation and add a gradient background, and use AlphaMaskFilter to create the reflection effect.

The following screenshot is a preview of the result:

The following is the source code of this example:

function init() {
  var canvas = document.getElementById("canvas");
  var stage = new createjs.Stage(canvas);

  var image = new Image();
  image.src = "easeljs.png";

  //wait to load the image
  image.onload = function(evt) {
    var bitmap = new createjs.Bitmap(evt.target);
    var width = bitmap.image.width;
    var height = bitmap.image.height;

    //clone the existing bitmap to use as reflection
    var reflectBitmap = bitmap.clone();
    reflectBitmap.regY = height;
    reflectBitmap.rotation = 180;

    //to add a padding from the main bitmap
    reflectBitmap.y = height + 2;
    reflectBitmap.scaleX = -1;

    var maskShape = new createjs.Shape();
    var graphics = maskShape.graphics;
    //add reflection effect
    graphics.beginLinearGradientFill(["rgba(255, 255, 255, 0)", "rgba(255, 255, 255, 0.6)"], [0.5, 1], 0, 10, 0, height);
    graphics.drawRect(0, 0, width, height);
    graphics.endFill();

    maskShape.cache(0, 0, width, height);

    reflectBitmap.filters = [new createjs.AlphaMaskFilter(maskShape.cacheCanvas)];
    reflectBitmap.cache(0, 0, width, height);

    //add both pictures
    stage.addChild(bitmap);
    stage.addChild(reflectBitmap);
    stage.update();
  }
}

As seen in previous examples, firstly, we created the Stage class. Then, in order to load the image, we used the Image class and passed the address of the image to the src property. The Image class has an onload event, which helps developers know when the image is loaded completely. We used this event to execute other parts of the application correctly.

After that, we used a Bitmap class and passed the image parameter from the Image class to it. Because we need the width and height of the picture, we saved them into two different variables called width and height. At this moment, we have the first picture but we should have one more picture to create the reflection effect. So, we used the clone function to duplicate the image. In order to change the rotation, scale, and coordination of the second image, we changed the regY, rotation, y, and scaleX properties.

After that, a new shape is created using the Shape class. This is the mask layer that will be used for the AlphaMaskFilter. Then, we added a linear background to it to create the reflection effect and cached it using the cache function. Finally, an AlphaMaskFilter is added to the second picture (a cloned Bitmap class) and this shape is used as the mask layer. The second picture is also cached again. Both pictures are added to Stage using the addChild function and Stage is also updated with the update function.