feat: support CanvasRenderingContext2D instance.

src/chart/chart.js

@@ -289,15 +289,21 @@ class Chart extends Base {
     const el = self.get('el');
     const context = self.get('context');
     let canvas;
-    if (el) {
+
+    if (context) { // CanvasRenderingContext2D
+      canvas = context.canvas;
+    } else if (el) { // HTMLElement
       canvas = el;
-    } else {
+    } else if (id) { // dom id
       canvas = document.getElementById(id);
-      if (!canvas) {
-        throw new Error('Please specify the id or el of the chart!');
-      }
     }
+
+    if (!canvas) {
+      throw new Error('Please specify the id or el of the chart!');
+    }
+
     self.set('canvas', canvas);
+
     if (context && canvas && !canvas.getContext) {
       canvas.getContext = function() {
         return context;
@@ -306,25 +312,24 @@ class Chart extends Base {
     let width = self.get('width');
     let height = self.get('height');
     const ratio = self._getRatio();
+
     if (!width) {
-      width = DomUtil.getWidth(canvas);
+      width = canvas.width || DomUtil.getWidth(canvas);
       self.set('width', width);
     }
 
     if (!height) {
-      height = DomUtil.getHeight(canvas);
+      height = canvas.height || DomUtil.getHeight(canvas);
       self.set('height', height);
     }
 
-    if (ratio) {
+    if (ratio > 1) {
       canvas.width = width * ratio;
       canvas.height = height * ratio;
       DomUtil.modiCSS(canvas, { height: height + 'px' });
       DomUtil.modiCSS(canvas, { width: width + 'px' });
-      if (ratio !== 1) {
-        const ctx = canvas.getContext('2d');
-        ctx.scale(ratio, ratio);
-      }
+      const ctx = canvas.getContext('2d');
+      ctx.scale(ratio, ratio);
     }
 
     self._initLayout();

test/unit/chart/chart-spec.js

@@ -23,7 +23,8 @@ describe('chart test', () => {
       expect(chart.get('width')).equal(500);
       expect(chart.get('height')).equal(500);
       expect(canvas.width).equal(500);
-      expect(canvas.style.width).equal('500px');
+      expect(canvas.style.width).equal('');
+      expect(canvas.style.height).equal('');
     });
 
     it('destroy', function() {
@@ -33,6 +34,20 @@ describe('chart test', () => {
       expect(chart.get('width')).equal(undefined);
     });
 
+    it('init without width, height, but pixelRatio > 1', function() {
+      chart = new Chart({
+        el: canvas,
+        pixelRatio: 3
+      });
+      expect(chart.get('width')).equal(500);
+      expect(chart.get('height')).equal(500);
+      expect(canvas.width).equal(1500);
+      expect(canvas.height).equal(1500);
+      expect(canvas.style.width).equal('500px');
+      expect(canvas.style.height).equal('500px');
+      chart.destroy();
+    });
+
     it('init width width and height', function() {
       chart = new Chart({
         el: canvas,
@@ -48,6 +63,35 @@ describe('chart test', () => {
       chart.destroy();
     });
 
+    it('init with context', function() {
+      // canvas width 800, canvas height 600
+      chart = new Chart({
+        context: canvas.getContext('2d')
+      });
+
+      expect(chart.get('width')).equal(800);
+      expect(chart.get('height')).equal(1200);
+      expect(canvas.width).equal(800);
+      expect(canvas.style.width).equal('400px');
+      chart.destroy();
+    });
+
+    it('init with context, and with pixelRatio > 1', function() {
+      // canvas width 800, canvas height 600
+      chart = new Chart({
+        context: canvas.getContext('2d'),
+        pixelRatio: 4
+      });
+
+      expect(chart.get('width')).equal(800);
+      expect(chart.get('height')).equal(1200);
+      expect(canvas.width).equal(3200);
+      expect(canvas.height).equal(4800);
+      expect(canvas.style.width).equal('800px');
+      chart.destroy();
+    });
+
+
     it('test assist', function() {
       chart = new Chart({
         el: canvas,