diff --git a/src/draw/canvas/color.js b/src/draw/canvas/color.js
new file mode 100644
index 0000000..23f0682
--- /dev/null
+++ b/src/draw/canvas/color.js
@@ -0,0 +1,20 @@
+export function Color(ctx, no, data, color) {
+    let c_total = color.length;
+    const cur = (no + (c_total * (Math.abs((no / 10) | 0) + 1))) % c_total;
+    if (Array.isArray(color[cur])) {
+        c_total = color[cur].length;
+        const vv = 1 / (c_total + 1);
+        const g = ctx.createLinearGradient(data.rect.x, data.rect.y, data.rect.x, data.rect.y + data.rect.h);
+        let i;
+        g.addColorStop(vv, color[cur][0]);
+        for (i = 0; i < c_total; i++) {
+            g.addColorStop(vv * (i + 1), color[cur][i]);
+        }
+        g.addColorStop(vv * (c_total + 1), color[cur][c_total - 1]);
+        ctx.strokeStyle = g;
+        ctx.fillStyle = g;
+    } else {
+        ctx.strokeStyle = color[cur];
+        ctx.fillStyle = color[cur];
+    }
+}
\ No newline at end of file
diff --git a/src/draw/canvas/colorful.js b/src/draw/canvas/colorful.js
new file mode 100644
index 0000000..5305ed8
--- /dev/null
+++ b/src/draw/canvas/colorful.js
@@ -0,0 +1,93 @@
+import {
+    PI2,
+    getCurrent
+} from '../../core/util.js';
+import {
+    cubicBezierLength,
+    distance
+} from '../../core/length.js';
+
+let colorArr;
+let curColor = -1;
+let colorTotal;
+const MIN_DISTANCE = 10;
+
+export function Colorful(ctx, model, colors) {
+    curColor = -1;
+    colorArr = colors;
+    colorTotal = colorArr.length;
+    const total = model.data.length;
+    let i, d, j, j_total, line, pos, prev;
+    let max, length, prevRatio;
+    for (i = 0; i < total; i++) {
+        d = model.data[i];
+        max = d.pointsLength.max;
+        prevRatio = 0;
+        j_total = d.lines.length;
+        prev = null;
+        for (j = 0; j < j_total; j++) {
+            line = d.lines[j];
+            pos = line.pos;
+            if (pos.type == 'a') {
+                setColor(ctx);
+                ctx.beginPath();
+                ctx.arc(pos.x, pos.y, pos.radius * d.drawing.value, 0, PI2);
+                ctx.fill();
+                ctx.closePath();
+            } else if (pos.type == 'm') {
+                prev = pos;
+            } else if (pos.type == 'l') {
+                length = distance(prev.x, prev.y, pos.x, pos.y);
+                if (length / model.scale > MIN_DISTANCE) {
+                    // ignore short distance paths
+                    setColor(ctx);
+                    ctx.beginPath();
+                    if (prev) ctx.moveTo(prev.x, prev.y);
+                    ctx.lineTo(pos.x, pos.y);
+                    prevRatio += draw(ctx, line, length, max, d, prevRatio);
+                }
+                prev = pos;
+            } else if (pos.type == 'b') {
+                length = cubicBezierLength(prev.x, prev.y, pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
+                if (length / model.scale > MIN_DISTANCE) {
+                    setColor(ctx);
+                    ctx.beginPath();
+                    if (prev) ctx.moveTo(prev.x, prev.y);
+                    ctx.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
+                    prevRatio += draw(ctx, line, length, max, d, prevRatio);
+                }
+                prev = {
+                    x: pos.x3,
+                    y: pos.y3
+                };
+            }
+        }
+    }
+}
+
+function setColor(ctx) {
+    const color = getColor();
+    ctx.fillStyle = color;
+    ctx.strokeStyle = color;
+}
+
+function getColor() {
+    curColor++;
+    if (curColor == colorTotal) curColor = 0;
+    return colorArr[curColor];
+}
+
+function draw(ctx, line, length, max, d, prevRatio) {
+    const ltRatio = length / max;
+    let dv = getCurrent(d.drawing.value, prevRatio + ltRatio, prevRatio, 1, 0);
+    if (line.direction == 1) {
+        dv = getCurrent(1 - d.drawing.value, prevRatio, prevRatio + ltRatio, 1, 0);
+    }
+    if (dv > 0) {
+        const frac = length * dv;
+        ctx.setLineDash([length]);
+        ctx.lineDashOffset = line.direction * (frac + length);
+        ctx.stroke();
+    }
+    return ltRatio;
+}
\ No newline at end of file
diff --git a/src/draw/canvas/grids.js b/src/draw/canvas/grids.js
new file mode 100644
index 0000000..c249eb0
--- /dev/null
+++ b/src/draw/canvas/grids.js
@@ -0,0 +1,23 @@
+export function Grids(ctx, data) {
+    ctx.save();
+
+    ctx.beginPath();
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = "#aaaaaa";
+    let i, total = data.guide.length,
+        grid;
+    for (i = 0; i < total; i++) {
+        grid = data.rect.y + data.grid[i];
+        ctx.moveTo(data.rect.x, grid);
+        ctx.lineTo(data.rect.x + data.rect.w, grid);
+    }
+    ctx.stroke();
+
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.strokeStyle = "#aaaaaa";
+    ctx.rect(data.rect.x, data.rect.y, data.rect.w, data.rect.h);
+    ctx.stroke();
+
+    ctx.restore();
+}
\ No newline at end of file
diff --git a/src/draw/canvas/lines.js b/src/draw/canvas/lines.js
new file mode 100644
index 0000000..bc59881
--- /dev/null
+++ b/src/draw/canvas/lines.js
@@ -0,0 +1,26 @@
+import {
+    PI2
+} from '../../core/util.js';
+
+export function Lines(ctx, data) {
+    const total = data.lines.length;
+    let i, d, pos;
+    for (i = 0; i < total; i++) {
+        d = data.lines[i];
+        pos = d.pos;
+        if (pos.type == 'a') {
+            ctx.beginPath();
+            ctx.arc(pos.x, pos.y, pos.radius * d.drawing.value, 0, PI2);
+            ctx.fill();
+            ctx.closePath();
+        } else if (pos.type == 'm') {
+            ctx.beginPath();
+            ctx.moveTo(pos.x, pos.y);
+        } else if (pos.type == 'l') {
+            ctx.lineTo(pos.x, pos.y);
+        } else if (pos.type == 'b') {
+            ctx.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
+        }
+        d.stroke(ctx, d);
+    }
+}
\ No newline at end of file
diff --git a/src/draw/canvas/pattern.js b/src/draw/canvas/pattern.js
new file mode 100644
index 0000000..58d98a5
--- /dev/null
+++ b/src/draw/canvas/pattern.js
@@ -0,0 +1,31 @@
+import {
+    PI2
+} from '../../core/util.js';
+
+export function Pattern(ctx, data, w, h) {
+    const total = Math.round(data.paths.length * data.drawing.value);
+    const w2 = w / 2;
+    const w3 = w / 3;
+    const h2 = h / 2;
+    let i, p;
+    for (i = 0; i < total; i++) {
+        p = data.paths[i];
+        if (p.num == 1) {
+            ctx.fillStyle = "#ff00c5";
+        } else {
+            ctx.fillStyle = "#ff95f8";
+        }
+        if (p.type == 'a') {
+            ctx.beginPath();
+            ctx.arc(p.x, p.y, w3, 0, PI2);
+            ctx.fill();
+        } else {
+            ctx.beginPath();
+            ctx.save();
+            ctx.translate(p.x, p.y);
+            ctx.rotate(p.rotation);
+            ctx.fillRect(-w2, -h2, w, h);
+            ctx.restore();
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/draw/canvas/points.js b/src/draw/canvas/points.js
new file mode 100644
index 0000000..cf21a6d
--- /dev/null
+++ b/src/draw/canvas/points.js
@@ -0,0 +1,73 @@
+import {
+    PI2
+} from '../../core/util.js';
+
+export function Points(ctx, data) {
+    ctx.save();
+    ctx.lineWidth = 1;
+    let total = data.lines.length;
+    let i;
+    for (i = 0; i < total; i++) {
+        eachLine_(ctx, data.lines[i]);
+    }
+    ctx.restore();
+
+    ctx.save();
+    ctx.lineWidth = 1;
+    total = data.typo.p.length;
+    for (i = 0; i < total; i++) {
+        eachPoint_(ctx, data.typo.p[i], data);
+    }
+    ctx.restore();
+}
+
+function eachPoint_(ctx, p, data) {
+    const total = p.v.length;
+    let i, mp, cp;
+    for (i = 0; i < total; i++) {
+        mp = p.cv[i];
+        cp = mp.addRect(data.rect);
+        if (mp.type == 'b') {
+            ctx.fillStyle = "#ff2a00";
+            ctx.beginPath();
+            ctx.arc(cp.x3 + (cp.x3 - cp.x2), cp.y3 + (cp.y3 - cp.y2), 1.5, 0, PI2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(cp.x2, cp.y2, 1.5, 0, PI2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.moveTo(cp.x2, cp.y2);
+            ctx.lineTo(cp.x3, cp.y3);
+            ctx.lineTo(cp.x3 + (cp.x3 - cp.x2), cp.y3 + (cp.y3 - cp.y2));
+            ctx.stroke();
+            ctx.beginPath();
+            ctx.fillStyle = "#ffffff";
+            ctx.arc(cp.x3, cp.y3, 2.5, 0, PI2);
+            ctx.fill();
+            ctx.stroke();
+        } else {
+            ctx.beginPath();
+            ctx.fillStyle = "#ffffff";
+            ctx.strokeStyle = "#ff2a00";
+            ctx.arc(cp.x, cp.y, 2.5, 0, PI2);
+            ctx.fill();
+            ctx.stroke();
+        }
+    }
+}
+
+function eachLine_(ctx, d) {
+    const pos = d.pos;
+    if (pos.type != 'a') {
+        if (pos.type == 'm') {
+            ctx.strokeStyle = "#ff2a00";
+            ctx.beginPath();
+            ctx.moveTo(pos.x, pos.y);
+        } else if (pos.type == 'l') {
+            ctx.lineTo(pos.x, pos.y);
+        } else if (pos.type == 'b') {
+            ctx.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
+        }
+        ctx.stroke();
+    }
+}
\ No newline at end of file
diff --git a/src/draw/canvas/wave.js b/src/draw/canvas/wave.js
new file mode 100644
index 0000000..b437608
--- /dev/null
+++ b/src/draw/canvas/wave.js
@@ -0,0 +1,54 @@
+import {
+    PI2,
+    getAmplitude
+} from '../../core/util.js';
+
+const THIN_LIMIT = 110;
+const COS = Math.cos;
+const SIN = Math.sin;
+
+export function Wave(ctx, data, scale, amplitude, weight, fps) {
+    const total = data.wavePaths.length;
+    const m_amplitude = getAmplitude(amplitude, scale);
+    let i, p, prev, qx, qy, saveDot = [];
+
+    ctx.beginPath();
+    for (i = 0; i < total; i++) {
+        p = data.wavePaths[i];
+        if (fps) {
+            const ranx = (Math.random() * m_amplitude) - (m_amplitude / 2);
+            const rany = (Math.random() * m_amplitude) - (m_amplitude / 2);
+            p.rx = p.x + ranx * COS(p.rotation);
+            p.ry = p.y + ranx * SIN(p.rotation);
+            p.sx = p.x + ranx;
+            p.sy = p.y + rany;
+        }
+
+        if (p.type == 'a') {
+            saveDot.push(p);
+        } else if (p.start == 1) {
+            ctx.moveTo(p.x, p.y);
+        } else if (p.fix) {
+            ctx.lineTo(p.x, p.y);
+        } else {
+            if (weight < THIN_LIMIT) {
+                prev = data.wavePaths[i - 1];
+                if (prev) {
+                    qx = prev.x + ((p.x - prev.x) * 0.5);
+                    qy = prev.y + ((p.y - prev.y) * 0.5);
+                    ctx.quadraticCurveTo(qx, qy, p.rx, p.ry);
+                }
+            } else {
+                ctx.lineTo(p.rx, p.ry);
+            }
+        }
+    }
+    ctx.stroke();
+
+    for (i = 0; i < saveDot.length; i++) {
+        p = saveDot[i];
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius, 0, PI2);
+        ctx.fill();
+    }
+}
\ No newline at end of file
diff --git a/src/draw/pixi/color.js b/src/draw/pixi/color.js
new file mode 100644
index 0000000..e063eaa
--- /dev/null
+++ b/src/draw/pixi/color.js
@@ -0,0 +1,33 @@
+export function PixiColor(no, data, color) {
+    let c_total = color.length;
+    const cur = (no + (c_total * (Math.abs((no / 10) | 0) + 1))) % c_total;
+    if (Array.isArray(color[cur])) {
+        /*
+        c_total = color[cur].length;
+        const vv = 1 / (c_total - 1);
+        const g = ctx.createLinearGradient(data.rect.x, data.rect.y, data.rect.x, data.rect.y + data.rect.h);
+        let i;
+        for (i = 0; i < c_total; i++) {
+            g.addColorStop(vv * i, color[cur][i]);
+        }
+        ctx.strokeStyle = g;
+        ctx.fillStyle = g;
+        */
+        /*
+        c_total = color[cur].length;
+        const vv = 1 / (c_total - 1);
+        const c = document.createElement("canvas");
+        const ctx = c.getContext("2d");
+        const g = ctx.createLinearGradient(0, 0, data.rect.w, data.rect.h);
+        let i;
+        for (i = 0; i < c_total; i++) {
+            g.addColorStop(vv * i, color[cur][i]);
+        }
+        ctx.fillStyle = g;
+        ctx.fillRect(0, 0, data.rect.w, data.rect.h);
+        return new PIXI.Texture.from(c);
+        */
+    } else {
+        return color[cur];
+    }
+}
\ No newline at end of file
diff --git a/src/draw/pixi/lines.js b/src/draw/pixi/lines.js
new file mode 100644
index 0000000..c63ff40
--- /dev/null
+++ b/src/draw/pixi/lines.js
@@ -0,0 +1,51 @@
+export function PixiLines(graphics, data, lineW, color) {
+    let total, i;
+    if (data.drawing.value == 1) {
+        total = data.lines.length;
+        for (i = 0; i < total; i++) {
+            eachLine_(graphics, data.lines[i], lineW, color);
+        }
+    } else {
+        total = data.drawingPaths.length * data.drawing.value;
+        for (i = 0; i < total; i++) {
+            
+            eachPath_(graphics, data.drawingPaths[i], lineW, color, data.drawing.value);
+        }
+    }
+}
+
+function eachLine_(graphics, data, lineW, color) {
+    const pos = data.pos;
+    if (pos.type == 'a') {
+        graphics.lineStyle(0, color, 0);
+        graphics.beginFill(color);
+        graphics.drawCircle(pos.x, pos.y, pos.radius);
+        graphics.endFill();
+    } else if (pos.type == 'm') {
+        graphics.lineStyle(lineW, color, 1);
+        graphics.moveTo(pos.x, pos.y);
+    } else if (pos.type == 'l') {
+        graphics.lineTo(pos.x, pos.y);
+    } else if (pos.type == 'b') {
+        graphics.bezierCurveTo(pos.x, pos.y, pos.x2, pos.y2, pos.x3, pos.y3);
+    }
+    if (data.closePath) {
+        graphics.closePath();
+    }
+}
+
+function eachPath_(graphics, pos, lineW, color, dValue) {
+    if (pos.type == 'a') {
+        graphics.lineStyle(0, color, 0);
+        graphics.beginFill(color);
+        graphics.drawCircle(pos.x, pos.y, pos.radius * dValue);
+        graphics.endFill();
+    } else {
+        if (pos.start == 1) {
+            graphics.lineStyle(lineW, color, 1);
+            graphics.moveTo(pos.x, pos.y);
+        } else {
+            graphics.lineTo(pos.x, pos.y, 1);
+        }
+    }
+}
\ No newline at end of file