JSPM

import DataCanvas from 'ben-canvas';

DataCanvas.line({
    lineWidth: 2, // The thickness of the line. optional.
    color: '#F00', // the color of the line. optional.
    points:[
        {
            x: 0.123,   // percentage
            y: 0.123,   // percentage
        }, {
            // ...
        }
    ]
});

DataCanvas.rect({
    lineWidth: 2, // The width of the rect border. optional.
    color: '#FF0', // the color of the rect border. optional.
    position: {
        x: 0.123,  // the x coordinate of left-top point of the rectangle in percentage
        y: 0.123   // the y coordinate of left-top point of the rectangle in percentage
    },
    width: 0.123,  // percentage
    height: 0.123  // percentage
});

DataCanvas.text({
    size: 14, // The font-size of the text. Optional.
    lineHeight: 18, // The line-height of the text. Optional.
    color: '#F00',  // The color of the text. Optional.
    position: {
        x: 0.123,  // percentage
        y: 0.123   // percentage
    },
    width: 0.123,   // percentage
    height: 0.123  // percentage
});

DataCanvas.ellipse({
    lineWidth: 2, // The width of the ellipse border. optional.
    points: [
        {x: 0.1, y: 0.1},
        {x: 0.9, y: 0.9}
    ]
});

DataCanvas.ease({
    lineWidth: 2, // The thickness of the ease pen. optional.
    points: [
        {x: 0.1, y: 0.1},  // The trajectory which you want to ease;
        {x: 0.9, y: 0.9},
        // .....
    ]
});

DataCanvas.clear(); // 清楚整个画布