diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
index 4fcf67609..ca5661595 100644
--- a/CHANGELOG_CN.md
+++ b/CHANGELOG_CN.md
@@ -7,6 +7,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 ## [Unreleased]
 
 -   新增 `option.proxy` 选项，用于代理第三方的 `video` 和 `canvas`
+-   新增 `artplayer-proxy-canvas` 代理
 -   新增 `artplayer-proxy-webav` 代理，来自 [bilibili/WebAV](https://github.com/bilibili/WebAV)
 -   新增 `option.thumbnails.scale`, 用于预览图缩放
 -   修复更改 `art.url` 不能触发 `autoPlayBack` 的 `bug`: [#797](https://github.com/zhw2590582/ArtPlayer/issues/797)
diff --git a/README.md b/README.md
index 9b688e724..ac49eb6a5 100644
--- a/README.md
+++ b/README.md
@@ -118,6 +118,7 @@ var art = new Artplayer({
 
 ## Proxys
 
+-   [Canvas](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas) (WIP)
 -   [WebAV](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-webav/index.js&example=webav) (WIP)
 
 ## Changelog
diff --git a/docs/assets/example/canvas.js b/docs/assets/example/canvas.js
new file mode 100644
index 000000000..19fbba0ef
--- /dev/null
+++ b/docs/assets/example/canvas.js
@@ -0,0 +1,28 @@
+// npm i artplayer-proxy-canvas
+// import artplayerProxyCanvas from 'artplayer-proxy-canvas';
+
+var art = new Artplayer({
+    container: '.artplayer-app',
+    url: '/assets/sample/frag_bunny.mp4',
+    volume: 0.5,
+    autoplay: false,
+    autoSize: false,
+    screenshot: true,
+    setting: true,
+    loop: true,
+    flip: true,
+    playbackRate: true,
+    aspectRatio: true,
+    fullscreen: true,
+    fullscreenWeb: true,
+    miniProgressBar: true,
+    autoPlayback: true,
+    thumbnails: {
+        url: '/assets/sample/bbb-sprite.jpg',
+        number: 121,
+        column: 11,
+        width: 128,
+        height: 72,
+    },
+    proxy: artplayerProxyCanvas(),
+});
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index b26eec189..d99321ad3 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -102,6 +102,10 @@
                     </ul>
                     <ul>
                         <li class="title">Proxys</li>
+                        <li>
+                            <a
+                                href="/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas">artplayer-proxy-canvas</a>
+                        </li>
                         <li>
                             <a
                                 href="/?libs=./uncompiled/artplayer-proxy-webav/index.js&example=webav">artplayer-proxy-webav</a>
diff --git a/docs/uncompiled/artplayer-proxy-canvas/index.js b/docs/uncompiled/artplayer-proxy-canvas/index.js
new file mode 100644
index 000000000..5c400dd63
--- /dev/null
+++ b/docs/uncompiled/artplayer-proxy-canvas/index.js
@@ -0,0 +1,265 @@
+// modules are defined as an array
+// [ module function, map of requires ]
+//
+// map of requires is short require name -> numeric require
+//
+// anything defined in a previous bundle is accessed via the
+// orig method which is the require for previous bundles
+
+(function (modules, entry, mainEntry, parcelRequireName, globalName) {
+  /* eslint-disable no-undef */
+  var globalObject =
+    typeof globalThis !== 'undefined'
+      ? globalThis
+      : typeof self !== 'undefined'
+      ? self
+      : typeof window !== 'undefined'
+      ? window
+      : typeof global !== 'undefined'
+      ? global
+      : {};
+  /* eslint-enable no-undef */
+
+  // Save the require from previous bundle to this closure if any
+  var previousRequire =
+    typeof globalObject[parcelRequireName] === 'function' &&
+    globalObject[parcelRequireName];
+
+  var cache = previousRequire.cache || {};
+  // Do not use `require` to prevent Webpack from trying to bundle this call
+  var nodeRequire =
+    typeof module !== 'undefined' &&
+    typeof module.require === 'function' &&
+    module.require.bind(module);
+
+  function newRequire(name, jumped) {
+    if (!cache[name]) {
+      if (!modules[name]) {
+        // if we cannot find the module within our internal map or
+        // cache jump to the current global require ie. the last bundle
+        // that was added to the page.
+        var currentRequire =
+          typeof globalObject[parcelRequireName] === 'function' &&
+          globalObject[parcelRequireName];
+        if (!jumped && currentRequire) {
+          return currentRequire(name, true);
+        }
+
+        // If there are other bundles on this page the require from the
+        // previous one is saved to 'previousRequire'. Repeat this as
+        // many times as there are bundles until the module is found or
+        // we exhaust the require chain.
+        if (previousRequire) {
+          return previousRequire(name, true);
+        }
+
+        // Try the node require function if it exists.
+        if (nodeRequire && typeof name === 'string') {
+          return nodeRequire(name);
+        }
+
+        var err = new Error("Cannot find module '" + name + "'");
+        err.code = 'MODULE_NOT_FOUND';
+        throw err;
+      }
+
+      localRequire.resolve = resolve;
+      localRequire.cache = {};
+
+      var module = (cache[name] = new newRequire.Module(name));
+
+      modules[name][0].call(
+        module.exports,
+        localRequire,
+        module,
+        module.exports,
+        this
+      );
+    }
+
+    return cache[name].exports;
+
+    function localRequire(x) {
+      var res = localRequire.resolve(x);
+      return res === false ? {} : newRequire(res);
+    }
+
+    function resolve(x) {
+      var id = modules[name][1][x];
+      return id != null ? id : x;
+    }
+  }
+
+  function Module(moduleName) {
+    this.id = moduleName;
+    this.bundle = newRequire;
+    this.exports = {};
+  }
+
+  newRequire.isParcelRequire = true;
+  newRequire.Module = Module;
+  newRequire.modules = modules;
+  newRequire.cache = cache;
+  newRequire.parent = previousRequire;
+  newRequire.register = function (id, exports) {
+    modules[id] = [
+      function (require, module) {
+        module.exports = exports;
+      },
+      {},
+    ];
+  };
+
+  Object.defineProperty(newRequire, 'root', {
+    get: function () {
+      return globalObject[parcelRequireName];
+    },
+  });
+
+  globalObject[parcelRequireName] = newRequire;
+
+  for (var i = 0; i < entry.length; i++) {
+    newRequire(entry[i]);
+  }
+
+  if (mainEntry) {
+    // Expose entry point to Node, AMD or browser globals
+    // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
+    var mainExports = newRequire(mainEntry);
+
+    // CommonJS
+    if (typeof exports === 'object' && typeof module !== 'undefined') {
+      module.exports = mainExports;
+
+      // RequireJS
+    } else if (typeof define === 'function' && define.amd) {
+      define(function () {
+        return mainExports;
+      });
+
+      // <script>
+    } else if (globalName) {
+      this[globalName] = mainExports;
+    }
+  }
+})({"iXeaa":[function(require,module,exports) {
+var parcelHelpers = require("@parcel/transformer-js/src/esmodule-helpers.js");
+parcelHelpers.defineInteropFlag(exports);
+parcelHelpers.export(exports, "default", ()=>artplayerProxyCanvas);
+function artplayerProxyCanvas(callback) {
+    return (art)=>{
+        const { option, constructor } = art;
+        const { createElement, def } = constructor.utils;
+        const canvas = createElement("canvas");
+        const ctx = canvas.getContext("2d");
+        const video = createElement("video");
+        let animationFrame = null;
+        const { propertys, methods, prototypes, events } = constructor.config;
+        const keys = [
+            ...propertys,
+            ...methods,
+            ...prototypes
+        ];
+        keys.forEach((key)=>{
+            def(canvas, key, {
+                get () {
+                    const value = video[key];
+                    return typeof value === "function" ? value.bind(video) : value;
+                },
+                set (value) {
+                    video[key] = value;
+                }
+            });
+        });
+        setTimeout(()=>{
+            for(let index = 0; index < events.length; index++){
+                const event = events[index];
+                art.proxy(video, event, (event)=>{
+                    art.emit(`video:${event.type}`, event);
+                });
+            }
+        });
+        let lastDrawTime = 0;
+        const drawFrame = (timestamp)=>{
+            if (!video.paused && !video.ended) {
+                if (timestamp - lastDrawTime > 1000 / 30) {
+                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                    lastDrawTime = timestamp;
+                }
+                animationFrame = requestAnimationFrame(drawFrame);
+            }
+        };
+        const resize = ()=>{
+            const player = art.template?.$player;
+            if (!player || option.autoSize) return;
+            const aspectRatio = canvas.videoWidth / canvas.videoHeight;
+            const containerWidth = player.clientWidth;
+            const containerHeight = player.clientHeight;
+            const containerRatio = containerWidth / containerHeight;
+            let paddingLeft = 0;
+            let paddingTop = 0;
+            if (containerRatio > aspectRatio) {
+                const canvasWidth = containerHeight * aspectRatio;
+                paddingLeft = (containerWidth - canvasWidth) / 2;
+            } else {
+                const canvasHeight = containerWidth / aspectRatio;
+                paddingTop = (containerHeight - canvasHeight) / 2;
+            }
+            Object.assign(canvas.style, {
+                padding: `${paddingTop}px ${paddingLeft}px`
+            });
+        };
+        art.on("video:loadedmetadata", ()=>{
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            resize();
+        });
+        art.on("video:play", ()=>{
+            console.log("video:play");
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(drawFrame);
+        });
+        art.on("video:pause", ()=>{
+            cancelAnimationFrame(animationFrame);
+        });
+        art.on("resize", resize);
+        if (typeof callback === "function") callback.call(art, video, option.url, art);
+        else video.src = option.url;
+        return canvas;
+    };
+}
+if (typeof window !== "undefined") window["artplayerProxyCanvas"] = artplayerProxyCanvas;
+
+},{"@parcel/transformer-js/src/esmodule-helpers.js":"5dUr6"}],"5dUr6":[function(require,module,exports) {
+exports.interopDefault = function(a) {
+    return a && a.__esModule ? a : {
+        default: a
+    };
+};
+exports.defineInteropFlag = function(a) {
+    Object.defineProperty(a, "__esModule", {
+        value: true
+    });
+};
+exports.exportAll = function(source, dest) {
+    Object.keys(source).forEach(function(key) {
+        if (key === "default" || key === "__esModule" || Object.prototype.hasOwnProperty.call(dest, key)) return;
+        Object.defineProperty(dest, key, {
+            enumerable: true,
+            get: function() {
+                return source[key];
+            }
+        });
+    });
+    return dest;
+};
+exports.export = function(dest, destName, get) {
+    Object.defineProperty(dest, destName, {
+        enumerable: true,
+        get: get
+    });
+};
+
+},{}]},["iXeaa"], "iXeaa", "parcelRequire4dc0")
+
+//# sourceMappingURL=index.js.map
diff --git a/docs/uncompiled/artplayer-proxy-canvas/index.js.map b/docs/uncompiled/artplayer-proxy-canvas/index.js.map
new file mode 100644
index 000000000..0d86b24fd
--- /dev/null
+++ b/docs/uncompiled/artplayer-proxy-canvas/index.js.map
@@ -0,0 +1 @@
+{"mappings":"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","sources":["packages/artplayer-proxy-canvas/src/index.js","node_modules/@parcel/transformer-js/src/esmodule-helpers.js"],"sourcesContent":["export default function artplayerProxyCanvas(callback) {\n    return (art) => {\n        const { option, constructor } = art;\n        const { createElement, def } = constructor.utils;\n\n        const canvas = createElement('canvas');\n        const ctx = canvas.getContext('2d');\n        const video = createElement('video');\n\n        let animationFrame = null;\n        const { propertys, methods, prototypes, events } = constructor.config;\n        const keys = [...propertys, ...methods, ...prototypes];\n\n        keys.forEach((key) => {\n            def(canvas, key, {\n                get() {\n                    const value = video[key];\n                    return typeof value === 'function' ? value.bind(video) : value;\n                },\n                set(value) {\n                    video[key] = value;\n                },\n            });\n        });\n\n        setTimeout(() => {\n            for (let index = 0; index < events.length; index++) {\n                const event = events[index];\n                art.proxy(video, event, (event) => {\n                    art.emit(`video:${event.type}`, event);\n                });\n            }\n        });\n\n        let lastDrawTime = 0;\n        const drawFrame = (timestamp) => {\n            if (!video.paused && !video.ended) {\n                if (timestamp - lastDrawTime > 1000 / 30) {\n                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);\n                    lastDrawTime = timestamp;\n                }\n                animationFrame = requestAnimationFrame(drawFrame);\n            }\n        };\n\n        const resize = () => {\n            const player = art.template?.$player;\n            if (!player || option.autoSize) return;\n\n            const aspectRatio = canvas.videoWidth / canvas.videoHeight;\n            const containerWidth = player.clientWidth;\n            const containerHeight = player.clientHeight;\n            const containerRatio = containerWidth / containerHeight;\n\n            let paddingLeft = 0;\n            let paddingTop = 0;\n\n            if (containerRatio > aspectRatio) {\n                const canvasWidth = containerHeight * aspectRatio;\n                paddingLeft = (containerWidth - canvasWidth) / 2;\n            } else {\n                const canvasHeight = containerWidth / aspectRatio;\n                paddingTop = (containerHeight - canvasHeight) / 2;\n            }\n\n            Object.assign(canvas.style, {\n                padding: `${paddingTop}px ${paddingLeft}px`,\n            });\n        };\n\n        art.on('video:loadedmetadata', () => {\n            canvas.width = video.videoWidth;\n            canvas.height = video.videoHeight;\n            resize();\n        });\n\n        art.on('video:play', () => {\n            console.log('video:play');\n            cancelAnimationFrame(animationFrame);\n            animationFrame = requestAnimationFrame(drawFrame);\n        });\n\n        art.on('video:pause', () => {\n            cancelAnimationFrame(animationFrame);\n        });\n\n        art.on('resize', resize);\n\n        if (typeof callback === 'function') {\n            callback.call(art, video, option.url, art);\n        } else {\n            video.src = option.url;\n        }\n\n        return canvas;\n    };\n}\n\nif (typeof window !== 'undefined') {\n    window['artplayerProxyCanvas'] = artplayerProxyCanvas;\n}\n","exports.interopDefault = function (a) {\n  return a && a.__esModule ? a : {default: a};\n};\n\nexports.defineInteropFlag = function (a) {\n  Object.defineProperty(a, '__esModule', {value: true});\n};\n\nexports.exportAll = function (source, dest) {\n  Object.keys(source).forEach(function (key) {\n    if (\n      key === 'default' ||\n      key === '__esModule' ||\n      Object.prototype.hasOwnProperty.call(dest, key)\n    ) {\n      return;\n    }\n\n    Object.defineProperty(dest, key, {\n      enumerable: true,\n      get: function () {\n        return source[key];\n      },\n    });\n  });\n\n  return dest;\n};\n\nexports.export = function (dest, destName, get) {\n  Object.defineProperty(dest, destName, {\n    enumerable: true,\n    get: get,\n  });\n};\n"],"names":[],"version":3,"file":"index.js.map","sourceRoot":"../../../"}
\ No newline at end of file
diff --git a/packages/artplayer-proxy-canvas/README.md b/packages/artplayer-proxy-canvas/README.md
new file mode 100644
index 000000000..40341915b
--- /dev/null
+++ b/packages/artplayer-proxy-canvas/README.md
@@ -0,0 +1,11 @@
+# artplayer-proxy-canvas
+
+canvas proxy for ArtPlayer
+
+## Demo
+
+[https://artplayer.org](https://artplayer.org/?libs=./uncompiled/artplayer-proxy-canvas/index.js&example=canvas)
+
+## License
+
+MIT © Harvey Zack
diff --git a/packages/artplayer-proxy-canvas/package.json b/packages/artplayer-proxy-canvas/package.json
new file mode 100644
index 000000000..4cb5b06f3
--- /dev/null
+++ b/packages/artplayer-proxy-canvas/package.json
@@ -0,0 +1,24 @@
+{
+  "license": "MIT",
+  "version": "1.0.0",
+  "name": "artplayer-proxy-canvas",
+  "types": "types/artplayer-proxy-canvas.d.ts",
+  "description": "canvas proxy for ArtPlayer",
+  "main": "dist/artplayer-proxy-canvas.js",
+  "legacy": "dist/artplayer-proxy-canvas.legacy.js",
+  "author": "Harvey Zack <laozhaochaguan@gmail.com>",
+  "browserslist": "last 1 Chrome version",
+  "homepage": "https://artplayer.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhw2590582/ArtPlayer.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zhw2590582/ArtPlayer/issues"
+  },
+  "keywords": [
+    "html5",
+    "video",
+    "player"
+  ]
+}
\ No newline at end of file
diff --git a/packages/artplayer-proxy-canvas/src/index.js b/packages/artplayer-proxy-canvas/src/index.js
new file mode 100644
index 000000000..af2d2b690
--- /dev/null
+++ b/packages/artplayer-proxy-canvas/src/index.js
@@ -0,0 +1,101 @@
+export default function artplayerProxyCanvas(callback) {
+    return (art) => {
+        const { option, constructor } = art;
+        const { createElement, def } = constructor.utils;
+
+        const canvas = createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        const video = createElement('video');
+
+        let animationFrame = null;
+        const { propertys, methods, prototypes, events } = constructor.config;
+        const keys = [...propertys, ...methods, ...prototypes];
+
+        keys.forEach((key) => {
+            def(canvas, key, {
+                get() {
+                    const value = video[key];
+                    return typeof value === 'function' ? value.bind(video) : value;
+                },
+                set(value) {
+                    video[key] = value;
+                },
+            });
+        });
+
+        setTimeout(() => {
+            for (let index = 0; index < events.length; index++) {
+                const event = events[index];
+                art.proxy(video, event, (event) => {
+                    art.emit(`video:${event.type}`, event);
+                });
+            }
+        });
+
+        let lastDrawTime = 0;
+        const drawFrame = (timestamp) => {
+            if (!video.paused && !video.ended) {
+                if (timestamp - lastDrawTime > 1000 / 30) {
+                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+                    lastDrawTime = timestamp;
+                }
+                animationFrame = requestAnimationFrame(drawFrame);
+            }
+        };
+
+        const resize = () => {
+            const player = art.template?.$player;
+            if (!player || option.autoSize) return;
+
+            const aspectRatio = canvas.videoWidth / canvas.videoHeight;
+            const containerWidth = player.clientWidth;
+            const containerHeight = player.clientHeight;
+            const containerRatio = containerWidth / containerHeight;
+
+            let paddingLeft = 0;
+            let paddingTop = 0;
+
+            if (containerRatio > aspectRatio) {
+                const canvasWidth = containerHeight * aspectRatio;
+                paddingLeft = (containerWidth - canvasWidth) / 2;
+            } else {
+                const canvasHeight = containerWidth / aspectRatio;
+                paddingTop = (containerHeight - canvasHeight) / 2;
+            }
+
+            Object.assign(canvas.style, {
+                padding: `${paddingTop}px ${paddingLeft}px`,
+            });
+        };
+
+        art.on('video:loadedmetadata', () => {
+            canvas.width = video.videoWidth;
+            canvas.height = video.videoHeight;
+            resize();
+        });
+
+        art.on('video:play', () => {
+            console.log('video:play');
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(drawFrame);
+        });
+
+        art.on('video:pause', () => {
+            cancelAnimationFrame(animationFrame);
+        });
+
+        art.on('resize', resize);
+
+        if (typeof callback === 'function') {
+            callback.call(art, video, option.url, art);
+        } else {
+            video.src = option.url;
+        }
+
+        return canvas;
+    };
+}
+
+if (typeof window !== 'undefined') {
+    window['artplayerProxyCanvas'] = artplayerProxyCanvas;
+}
diff --git a/packages/artplayer-proxy-canvas/types/artplayer-proxy-canvas.d.ts b/packages/artplayer-proxy-canvas/types/artplayer-proxy-canvas.d.ts
new file mode 100644
index 000000000..afb1e6633
--- /dev/null
+++ b/packages/artplayer-proxy-canvas/types/artplayer-proxy-canvas.d.ts
@@ -0,0 +1,10 @@
+import type Artplayer from 'artplayer';
+
+export = artplayerProxyCanvas;
+export as namespace artplayerProxyCanvas;
+
+type Option = (video: HTMLVideoElement, url: String, art: Artplayer) => void;
+
+type Result = HTMLCanvasElement;
+
+declare const artplayerProxyCanvas: (option: Option) => (art: Artplayer) => Result;