fix(): fixed high pixed ratio

Author: rongjun.qiu

lib/CanvasTextEditor.js

@@ -20,7 +20,8 @@ var CanvasTextEditor = function(doc, options) {
     fontSize: 14,
     padding: 5,
     width: 640,
-    height: 480
+    height: 480,
+    dpr: window.devicePixelRatio || 1,
   };
 
   if (typeof options === 'object') {
@@ -172,7 +173,7 @@ CanvasTextEditor.prototype._createCanvas = function() {
   this.canvas = document.createElement('canvas');
   this.canvas.style.display = 'block';
   this.context = this.canvas.getContext('2d');
-  this.resize(this.options.width, this.options.height);
+  this.resize(this.options.width, this.options.height, this.options.dpr);
   this.render();
   this.wrapper.appendChild(this.canvas);
 };
@@ -394,9 +395,12 @@ CanvasTextEditor.prototype.getDocument = function() {
  * @param  {Number} width 
  * @param  {Number} height
  */
-CanvasTextEditor.prototype.resize = function(width, height) {
-  this.canvas.width = width;
-  this.canvas.height = height;
+CanvasTextEditor.prototype.resize = function(width, height, dpr) {
+  this.canvas.width = width * dpr;
+  this.canvas.height = height * dpr;
+  this.canvas.style.width = `${width}px`;
+  this.canvas.style.height = `${height}px`; 
+  this.context.scale(dpr, dpr);
   // We need to update context settings every time we resize
   this.context.font = this._metrics.getSize() + 'px ' + this._metrics.getFamily();
 };