modules/canvas.js

  1. /**
  2.  * @license
  3.  * Copyright (c) 2014 Steven Spungin (TwelveTone LLC)  steven@twelvetone.tv
  4.  *
  5.  * Licensed under the MIT License.
  6.  * http://opensource.org/licenses/mit-license
  7.  */
  9. import { jsPDF } from "../jspdf.js";
  11. /**
  12.  * jsPDF Canvas PlugIn
  13.  * This plugin mimics the HTML5 Canvas
  14.  *
  15.  * The goal is to provide a way for current canvas users to print directly to a PDF.
  16.  * @name canvas
  17.  * @module
  18.  */
  19. (function(jsPDFAPI) {
  20.   "use strict";
  22.   /**
  23.    * @class Canvas
  24.    * @classdesc A Canvas Wrapper for jsPDF
  25.    */
  26.   var Canvas = function() {
  27.     var jsPdfInstance = undefined;
  28.     Object.defineProperty(this, "pdf", {
  29.       get: function() {
  30.         return jsPdfInstance;
  31.       },
  32.       set: function(value) {
  33.         jsPdfInstance = value;
  34.       }
  35.     });
  37.     var _width = 150;
  38.     /**
  39.      * The height property is a positive integer reflecting the height HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used.
  40.      * This is one of the two properties, the other being width, that controls the size of the canvas.
  41.      *
  42.      * @name width
  43.      */
  44.     Object.defineProperty(this, "width", {
  45.       get: function() {
  46.         return _width;
  47.       },
  48.       set: function(value) {
  49.         if (isNaN(value) || Number.isInteger(value) === false || value < 0) {
  50.           _width = 150;
  51.         } else {
  52.           _width = value;
  53.         }
  54.         if (this.getContext("2d").pageWrapXEnabled) {
  55.           this.getContext("2d").pageWrapX = _width + 1;
  56.         }
  57.       }
  58.     });
  60.     var _height = 300;
  61.     /**
  62.      * The width property is a positive integer reflecting the width HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used.
  63.      * This is one of the two properties, the other being height, that controls the size of the canvas.
  64.      *
  65.      * @name height
  66.      */
  67.     Object.defineProperty(this, "height", {
  68.       get: function() {
  69.         return _height;
  70.       },
  71.       set: function(value) {
  72.         if (isNaN(value) || Number.isInteger(value) === false || value < 0) {
  73.           _height = 300;
  74.         } else {
  75.           _height = value;
  76.         }
  77.         if (this.getContext("2d").pageWrapYEnabled) {
  78.           this.getContext("2d").pageWrapY = _height + 1;
  79.         }
  80.       }
  81.     });
  83.     var _childNodes = [];
  84.     Object.defineProperty(this, "childNodes", {
  85.       get: function() {
  86.         return _childNodes;
  87.       },
  88.       set: function(value) {
  89.         _childNodes = value;
  90.       }
  91.     });
  93.     var _style = {};
  94.     Object.defineProperty(this, "style", {
  95.       get: function() {
  96.         return _style;
  97.       },
  98.       set: function(value) {
  99.         _style = value;
  100.       }
  101.     });
  103.     Object.defineProperty(this, "parentNode", {});
  104.   };
  106.   /**
  107.    * The getContext() method returns a drawing context on the canvas, or null if the context identifier is not supported.
  108.    *
  109.    * @name getContext
  110.    * @function
  111.    * @param {string} contextType Is a String containing the context identifier defining the drawing context associated to the canvas. Possible value is "2d", leading to the creation of a Context2D object representing a two-dimensional rendering context.
  112.    * @param {object} contextAttributes
  113.    */
  114.   Canvas.prototype.getContext = function(contextType, contextAttributes) {
  115.     contextType = contextType || "2d";
  116.     var key;
  118.     if (contextType !== "2d") {
  119.       return null;
  120.     }
  121.     for (key in contextAttributes) {
  122.       if (this.pdf.context2d.hasOwnProperty(key)) {
  123.         this.pdf.context2d[key] = contextAttributes[key];
  124.       }
  125.     }
  126.     this.pdf.context2d._canvas = this;
  127.     return this.pdf.context2d;
  128.   };
  130.   /**
  131.    * The toDataURL() method is just a stub to throw an error if accidently called.
  132.    *
  133.    * @name toDataURL
  134.    * @function
  135.    */
  136.   Canvas.prototype.toDataURL = function() {
  137.     throw new Error("toDataURL is not implemented.");
  138.   };
  140.   jsPDFAPI.events.push([
  141.     "initialized",
  142.     function() {
  143.       this.canvas = new Canvas();
  144.       this.canvas.pdf = this;
  145.     }
  146.   ]);
  148.   return this;
  149. })(jsPDF.API);