ab-vector-cards/dist/vectorCards.js

ab-vector-cards is a JS lib extend HTML5 canvas to draw vector poker card.

'use strict';var _canvas = require('./canvas');var _canvas2 = _interopRequireDefault(_canvas);function _interopRequireDefault(obj) {return obj && obj.__esModule ? obj : { default: obj };}

var pc = function pc(size) {
  var canvas = document.createElement('canvas');
  canvas.height = size;
  canvas.width = size * 3 / 4;
  return canvas;
};

function VectorCards() {
  this.canvas = new _canvas2.default();
}

/**
   * Draw card number side as a image
   * @summary Poker.getCardImage  (size, suit, point)
   * @param {number} [size=200] - Height pixel of card. The ratio of card width and height is fixed to 3:4.
   * @param {string} [suit='h'] - Poker suit. The value is case insensitive and it should be one of these value in []:
   *     ['h', 'hearts', 'd', 'diamonds', 's', 'spades', 'c', 'clubs']
   *     'h', 'd', 's', 'c' are abbreviation
   *     When card point is 'O', 'h' or 'd' means big joker, 's' or 'c' means little joker.
   * @param {string} [point='O'] - Card point. The value is case insensitive and it should be one of these value in []:
   *     ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'O', 'JOKER']
   *     'O'(letter O) is abbreviation of 'JOKER'
   * @return {HTMLElement} image
   * @example
   *     document.body.appendChild(Poker.getCardImage(100, 'h', 'Q'));
   */
VectorCards.prototype.getCardImage = function (size, suit, point) {
  var image = document.createElement('img');
  image.src = this.getCardData(size, suit, point);
  return image;
},

/**
    * Draw card number side in a canvas
    * @summary Poker.getCardCanvas (size, suit, point)
    * @param {number} [size=200] - Height pixel of card. The ratio of card width and height is fixed to 3:4.
    * @param {string} [suit='h'] - Poker suit. The value is case insensitive and it should be one of these value in []:
    *     ['h', 'hearts', 'd', 'diamonds', 's', 'spades', 'c', 'clubs']
    *     'h', 'd', 's', 'c' are abbreviation
    *     When card point is 'O', 'h' or 'd' means big joker, 's' or 'c' means little joker.
    * @param {string} [point='O'] - Card point. The value is case insensitive and it should be one of these value in []:
    *     ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'O', 'JOKER']
    *     'O'(letter O) is abbreviation of 'JOKER'
    * @return {HTMLElement} canvas
    * @example
    *     document.body.appendChild(Poker.getCardCanvas(100, 'h', 'Q'));
    */
VectorCards.prototype.getCardCanvas = function (size, suit, point) {
  var canvas = pc(size);
  canvas.getContext('2d').drawPokerCard(0, 0, size, suit, point);
  return canvas;
},

/**
    * Get card number side image data
    * @summary Poker.getCardData   (size, suit, point)
    * @param {number} [size=200] - Height pixel of card. The ratio of card width and height is fixed to 3:4.
    * @param {string} [suit='h'] - Poker suit. The value is case insensitive and it should be one of these value in []:
    *     ['h', 'hearts', 'd', 'diamonds', 's', 'spades', 'c', 'clubs']
    *     'h', 'd', 's', 'c' are abbreviation
    *     When card point is 'O', 'h' or 'd' means big joker, 's' or 'c' means little joker.
    * @param {string} [point='O'] - Card point. The value is case insensitive and it should be one of these value in []:
    *     ['A', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'J', 'Q', 'K', 'O', 'JOKER']
    *     'O'(letter O) is abbreviation of 'JOKER'
    * @return {string} imageData
    * @example
    *     var imgData = Poker.getCardData(100, 'h', 'Q');
    */
VectorCards.prototype.getCardData = function (size, suit, point) {
  return this.getCardCanvas(size, suit, point).toDataURL();
},

/**
    * Draw card back side as a image
    * @summary Poker.getBackImage  (size[, foregroundColor, backgroundColor])
    * @param {number} [size=200] - Height pixel of card. The ratio of card width and height is fixed to 3:4.
    * @param {string} [foregroundColor='#BB5555'] - Foreground color.
    * @param {string} [backgroundColor='#AA2222'] - Background color.
    * @return {HTMLElement} image
    * @example
    *   document.body.appendChild(Poker.getBackImage(300, '#2E319C', '#7A7BB8'));
    */
VectorCards.prototype.getBackImage = function (size, foregroundColor, backgroundColor) {
  var image = document.createElement('img');
  image.src = this.getBackData(size, foregroundColor, backgroundColor);
  return image;
},

/**
    * Draw card back side in a canvas
    * @summary Poker.getBackCanvas (size[, foregroundColor, backgroundColor])
    * @param {number} [size=200] - Height pixel of card. The ratio of card width and height is fixed to 3:4.
    * @param {string} [foregroundColor='#BB5555'] - Foreground color.
    * @param {string} [backgroundColor='#AA2222'] - Background color.
    * @return {HTMLElement} canvas
    * @example
    *   document.body.appendChild(Poker.getBackCanvas(300, '#2E319C', '#7A7BB8'));
    */
VectorCards.prototype.getBackCanvas = function (size, foregroundColor, backgroundColor) {
  var canvas = pc(size);
  canvas.getContext('2d').drawPokerBack(0, 0, size, foregroundColor, backgroundColor);
  return canvas;
},

/**
    * Get card back side image data
    * @summary Poker.getBackData   (size[, foregroundColor, backgroundColor])
    * @param {number} [size=200] - Height pixel of card. The ratio of card width and height is fixed to 3:4.
    * @param {string} [foregroundColor='#BB5555'] - Foreground color.
    * @param {string} [backgroundColor='#AA2222'] - Background color.
    * @return {string} imageData
    * @example
    *   var imageData = Poker.getBackCanvas(300, '#2E319C', '#7A7BB8');
    */
VectorCards.prototype.getBackData = function (size, foregroundColor, backgroundColor) {
  return this.getBackCanvas(size, foregroundColor, backgroundColor).toDataURL();
};

module.exports = VectorCards;