Source: tiny/core/renderers/canvas/utils/CanvasMaskManager.js

import { SHAPES } from '../../../const';

/**
 * A set of functions used to handle masking.
 *
 * @class
 * @memberof Tiny
 */
export default class CanvasMaskManager {
  /**
   * @param {Tiny.CanvasRenderer} renderer - The canvas renderer.
   */
  constructor(renderer) {
    this.renderer = renderer;
  }

  /**
   * This method adds it to the current stack of masks.
   *
   * @param {object} maskData - the maskData that will be pushed
   */
  pushMask(maskData) {
    const renderer = this.renderer;

    renderer.context.save();

    const cacheAlpha = maskData.alpha;
    const transform = maskData.transform.worldTransform;
    const resolution = renderer.resolution;

    renderer.context.setTransform(
      transform.a * resolution,
      transform.b * resolution,
      transform.c * resolution,
      transform.d * resolution,
      transform.tx * resolution,
      transform.ty * resolution
    );

    // TODO suport sprite alpha masks??
    // lots of effort required. If demand is great enough..
    if (!maskData._texture) {
      this.renderGraphicsShape(maskData);
      renderer.context.clip();
    }

    maskData.worldAlpha = cacheAlpha;
  }

  /**
   * Renders a Tiny.Graphics shape.
   *
   * @param {Tiny.Graphics} graphics - The object to render.
   */
  renderGraphicsShape(graphics) {
    const context = this.renderer.context;
    const len = graphics.graphicsData.length;

    if (len === 0) {
      return;
    }

    context.beginPath();

    for (let i = 0; i < len; i++) {
      const data = graphics.graphicsData[i];
      const shape = data.shape;

      if (data.type === SHAPES.POLY) {
        let points = shape.points;
        const holes = data.holes;
        let outerArea;
        let innerArea;

        context.moveTo(points[0], points[1]);

        for (let j = 2; j < points.length; j += 2) {
          context.lineTo(points[j], points[j + 1]);
        }

        // if the first and last point are the same close the path - much neater :)
        if (points[0] === points[points.length - 2] && points[1] === points[points.length - 1]) {
          context.closePath();
        }

        if (holes.length > 0) {
          outerArea = 0;
          for (let j = 0; j < points.length; j += 2) {
            outerArea += (points[j] * points[j + 3]) - (points[j + 1] * points[j + 2]);
          }

          for (let k = 0; k < holes.length; k++) {
            points = holes[k].points;

            innerArea = 0;
            for (let j = 0; j < points.length; j += 2) {
              innerArea += (points[j] * points[j + 3]) - (points[j + 1] * points[j + 2]);
            }

            context.moveTo(points[0], points[1]);

            if (innerArea * outerArea < 0) {
              for (let j = 2; j < points.length; j += 2) {
                context.lineTo(points[j], points[j + 1]);
              }
            } else {
              for (let j = points.length - 2; j >= 2; j -= 2) {
                context.lineTo(points[j], points[j + 1]);
              }
            }
          }
        }
      } else if (data.type === SHAPES.RECT) {
        context.rect(shape.x, shape.y, shape.width, shape.height);
        context.closePath();
      } else if (data.type === SHAPES.CIRC) {
        // TODO - need to be Undefined!
        context.arc(shape.x, shape.y, shape.radius, 0, 2 * Math.PI);
        context.closePath();
      } else if (data.type === SHAPES.ELIP) {
        // ellipse code taken from: http://stackoverflow.com/questions/2172798/how-to-draw-an-oval-in-html5-canvas

        const w = shape.width * 2;
        const h = shape.height * 2;

        const x = shape.x - (w / 2);
        const y = shape.y - (h / 2);

        const kappa = 0.5522848;
        const ox = (w / 2) * kappa; // control point offset horizontal
        const oy = (h / 2) * kappa; // control point offset vertical
        const xe = x + w; // x-end
        const ye = y + h; // y-end
        const xm = x + (w / 2); // x-middle
        const ym = y + (h / 2); // y-middle

        context.moveTo(x, ym);
        context.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
        context.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
        context.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
        context.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
        context.closePath();
      } else if (data.type === SHAPES.RREC) {
        const rx = shape.x;
        const ry = shape.y;
        const width = shape.width;
        const height = shape.height;
        let radius = shape.radius;

        const maxRadius = Math.min(width, height) / 2 | 0;

        radius = radius > maxRadius ? maxRadius : radius;

        context.moveTo(rx, ry + radius);
        context.lineTo(rx, ry + height - radius);
        context.quadraticCurveTo(rx, ry + height, rx + radius, ry + height);
        context.lineTo(rx + width - radius, ry + height);
        context.quadraticCurveTo(rx + width, ry + height, rx + width, ry + height - radius);
        context.lineTo(rx + width, ry + radius);
        context.quadraticCurveTo(rx + width, ry, rx + width - radius, ry);
        context.lineTo(rx + radius, ry);
        context.quadraticCurveTo(rx, ry, rx, ry + radius);
        context.closePath();
      }
    }
  }

  /**
   * Restores the current drawing context to the state it was before the mask was applied.
   *
   * @param {Tiny.CanvasRenderer} renderer - The renderer context to use.
   */
  popMask(renderer) {
    renderer.context.restore();
    renderer.invalidateBlendMode();
  }

  /**
   * Destroys this canvas mask manager.
   *
   */
  destroy() {
    /* empty */
  }
}