konva/src/Canvas.ts

import { Util, Collection } from './Util';
import { SceneContext, HitContext, Context } from './Context';
import { glob, getGlobalKonva } from './Global';

// calculate pixel ratio
var _pixelRatio;
function getDevicePixelRatio() {
  if (_pixelRatio) {
    return _pixelRatio;
  }
  var canvas = Util.createCanvasElement();
  var context = canvas.getContext('2d');
  _pixelRatio = (function() {
    var devicePixelRatio = glob.window.devicePixelRatio || 1,
      backingStoreRatio =
        context.webkitBackingStorePixelRatio ||
        context.mozBackingStorePixelRatio ||
        context.msBackingStorePixelRatio ||
        context.oBackingStorePixelRatio ||
        context.backingStorePixelRatio ||
        1;
    return devicePixelRatio / backingStoreRatio;
  })();
  return _pixelRatio;
}

interface ICanvasConfig {
  width?: number;
  height?: number;
  pixelRatio?: number;
}

/**
 * Canvas Renderer constructor
 * @constructor
 * @abstract
 * @memberof Konva
 * @param {Object} config
 * @param {Number} config.width
 * @param {Number} config.height
 * @param {Number} config.pixelRatio KonvaJS automatically handles pixel ratio adjustments in order to render crisp drawings
 *  on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
 *  of 1.  Some high end tablets and phones, like iPhones and iPads (not the mini) have a device pixel ratio
 *  of 2.  Some Macbook Pros, and iMacs also have a device pixel ratio of 2.  Some high end Android devices have pixel
 *  ratios of 2 or 3.  Some browsers like Firefox allow you to configure the pixel ratio of the viewport.  Unless otherwise
 *  specified, the pixel ratio will be defaulted to the actual device pixel ratio.  You can override the device pixel
 *  ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
 */
export class Canvas {
  pixelRatio = 1;
  _canvas: HTMLCanvasElement;
  context: Context;
  width = 0;
  height = 0;

  isCache = false;

  constructor(config: ICanvasConfig) {
    this.init(config);
    var conf = config || {};

    var pixelRatio =
      conf.pixelRatio || getGlobalKonva().pixelRatio || getDevicePixelRatio();

    this.pixelRatio = pixelRatio;

    this._canvas = Util.createCanvasElement();
    // set inline styles
    this._canvas.style.padding = '0';
    this._canvas.style.margin = '0';
    this._canvas.style.border = '0';
    this._canvas.style.background = 'transparent';
    this._canvas.style.position = 'absolute';
    this._canvas.style.top = '0';
    this._canvas.style.left = '0';
  }

  init(config) {}
  /**
   * get canvas context
   * @method
   * @memberof Konva.Canvas.prototype
   * @returns {CanvasContext} context
   */
  getContext() {
    return this.context;
  }
  /**
   * get pixel ratio
   * @method
   * @memberof Konva.Canvas.prototype
   * @returns {Number} pixel ratio
   */
  getPixelRatio() {
    return this.pixelRatio;
  }
  /**
   * get pixel ratio
   * @method
   * @memberof Konva.Canvas.prototype
   * @param {Number} pixelRatio KonvaJS automatically handles pixel ratio adustments in order to render crisp drawings
   *  on all devices. Most desktops, low end tablets, and low end phones, have device pixel ratios
   *  of 1.  Some high end tablets and phones, like iPhones and iPads have a device pixel ratio
   *  of 2.  Some Macbook Pros, and iMacs also have a device pixel ratio of 2.  Some high end Android devices have pixel
   *  ratios of 2 or 3.  Some browsers like Firefox allow you to configure the pixel ratio of the viewport.  Unless otherwise
   *  specificed, the pixel ratio will be defaulted to the actual device pixel ratio.  You can override the device pixel
   *  ratio for special situations, or, if you don't want the pixel ratio to be taken into account, you can set it to 1.
   */
  setPixelRatio(pixelRatio) {
    var previousRatio = this.pixelRatio;
    this.pixelRatio = pixelRatio;
    this.setSize(
      this.getWidth() / previousRatio,
      this.getHeight() / previousRatio
    );
  }
  /**
   * set width
   * @method
   * @memberof Konva.Canvas.prototype
   * @param {Number} width
   */
  setWidth(width) {
    // take into account pixel ratio
    this.width = this._canvas.width = width * this.pixelRatio;
    this._canvas.style.width = width + 'px';

    var pixelRatio = this.pixelRatio,
      _context = this.getContext()._context;
    _context.scale(pixelRatio, pixelRatio);
  }
  /**
   * set height
   * @method
   * @memberof Konva.Canvas.prototype
   * @param {Number} height
   */
  setHeight(height) {
    // take into account pixel ratio
    this.height = this._canvas.height = height * this.pixelRatio;
    this._canvas.style.height = height + 'px';
    var pixelRatio = this.pixelRatio,
      _context = this.getContext()._context;
    _context.scale(pixelRatio, pixelRatio);
  }
  /**
   * get width
   * @method
   * @memberof Konva.Canvas.prototype
   * @returns {Number} width
   */
  getWidth() {
    return this.width;
  }
  /**
   * get height
   * @method
   * @memberof Konva.Canvas.prototype
   * @returns {Number} height
   */
  getHeight() {
    return this.height;
  }
  /**
   * set size
   * @method
   * @memberof Konva.Canvas.prototype
   * @param {Number} width
   * @param {Number} height
   */
  setSize(width, height) {
    this.setWidth(width);
    this.setHeight(height);
  }
  /**
   * to data url
   * @method
   * @memberof Konva.Canvas.prototype
   * @param {String} mimeType
   * @param {Number} quality between 0 and 1 for jpg mime types
   * @returns {String} data url string
   */
  toDataURL(mimeType, quality) {
    try {
      // If this call fails (due to browser bug, like in Firefox 3.6),
      // then revert to previous no-parameter image/png behavior
      return this._canvas.toDataURL(mimeType, quality);
    } catch (e) {
      try {
        return this._canvas.toDataURL();
      } catch (err) {
        Util.warn('Unable to get data URL. ' + err.message);
        return '';
      }
    }
  }
}

export class SceneCanvas extends Canvas {
  constructor(config: ICanvasConfig = { width: 0, height: 0 }) {
    super(config);
    this.context = new SceneContext(this);
    this.setSize(config.width, config.height);
  }
}

export class HitCanvas extends Canvas {
  hitCanvas = true;
  constructor(config: ICanvasConfig = { width: 0, height: 0 }) {
    super(config);

    this.context = new HitContext(this);
    this.setSize(config.width, config.height);
    this.hitCanvas = true;
  }
}