diff --git a/packages/taro-cli/src/h5.js b/packages/taro-cli/src/h5.js
index 793f450d561c..87b4423f042f 100644
--- a/packages/taro-cli/src/h5.js
+++ b/packages/taro-cli/src/h5.js
@@ -77,7 +77,10 @@ const MAP_FROM_COMPONENTNAME_TO_ID = new Map([
 ])
 const APIS_NEED_TO_APPEND_THIS = new Map([
   ['createVideoContext', 1],
-  ['createCanvasContext', 1]
+  ['createCanvasContext', 1],
+  ['canvasGetImageData', 1],
+  ['canvasPutImageData', 1],
+  ['canvasToTempFilePath', 1]
 ])
 
 if (projectConfig.hasOwnProperty(DEVICE_RATIO)) {
diff --git a/packages/taro-components/src/components/canvas/index.js b/packages/taro-components/src/components/canvas/index.js
index ff1574466215..70be586139e8 100644
--- a/packages/taro-components/src/components/canvas/index.js
+++ b/packages/taro-components/src/components/canvas/index.js
@@ -31,19 +31,17 @@ class Canvas extends Taro.PureComponent {
   props
   width = 300
   height = 150
-  getWrapRef = ref => { 
-    const dom = findDOMNode(ref)
-    this.wrapDom = dom
+  getWrapRef = ref => {
+    if (ref) this.wrapDom = ref
   }
   getCanvasRef = ref => {
-    const dom = findDOMNode(ref)
-    this.canvasDom = dom
+    if (ref) this.canvasRef = ref
   }
   componentDidMount () {
     if (!this.wrapDom) return
     const { width, height } = this.wrapDom.getBoundingClientRect()
-    this.canvasDom.setAttribute('width', width)
-    this.canvasDom.setAttribute('height', height)
+    this.canvasRef.setAttribute('width', width)
+    this.canvasRef.setAttribute('height', height)
     this.width = width
     this.height = height
   }
diff --git a/packages/taro-h5/src/api/canvas/canvasGetImageData.js b/packages/taro-h5/src/api/canvas/canvasGetImageData.js
index 29d4a33e7162..3517ef53806d 100644
--- a/packages/taro-h5/src/api/canvas/canvasGetImageData.js
+++ b/packages/taro-h5/src/api/canvas/canvasGetImageData.js
@@ -1,4 +1,4 @@
-import { findDOMNode } from 'nervjs'
+import { findRef } from '../utils/index'
 
 /**
  * @typedef {Object} Param
@@ -15,13 +15,15 @@ import { findDOMNode } from 'nervjs'
 /**
  * 获取 canvas 区域隐含的像素数据。
  * @param {Param} object 参数
- * @param {Object} componentInstance
+ * @param {Object} componentInstance 在自定义组件下，当前组件实例的this，以操作组件内 <canvas> 组件
  */
-const canvasGetImageData = ({ canvasId, success, fail, complete, x, y, width, height }, componentInstance=document.body) => {
-  const dom = findDOMNode(componentInstance)
+const canvasGetImageData = ({ canvasId, success, fail, complete, x, y, width, height }, componentInstance) => {
+  const refId = `__taroref_${canvasId}`
+  const component = findRef(refId, componentInstance)
 
   /** @type {HTMLCanvasElement} */
-  const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
+  const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);
+
   try {
     const ctx = canvas.getContext('2d')
     const data = ctx.getImageData(x, y, width, height)
diff --git a/packages/taro-h5/src/api/canvas/canvasPutImageData.js b/packages/taro-h5/src/api/canvas/canvasPutImageData.js
index 3f87bc59bbaa..92138b9b6147 100644
--- a/packages/taro-h5/src/api/canvas/canvasPutImageData.js
+++ b/packages/taro-h5/src/api/canvas/canvasPutImageData.js
@@ -1,4 +1,4 @@
-import { findDOMNode } from 'nervjs'
+import { findRef } from '../utils/index'
 
 /**
  * @typedef {Object} Param
@@ -19,11 +19,13 @@ import { findDOMNode } from 'nervjs'
  * @param {Object} componentInstance 在自定义组件下，当前组件实例的this，以操作组件内 <canvas> 组件
  * @todo 暂未支持尺寸相关功能
  */
-const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, componentInstance=document.body) => {
-  const dom = findDOMNode(componentInstance)
+const canvasPutImageData = ({ canvasId, data, x, y, success, fail, complete }, componentInstance) => {
+  const refId = `__taroref_${canvasId}`
+  const component = findRef(refId, componentInstance)
 
   /** @type {HTMLCanvasElement} */
-  const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
+  const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);
+
   try {
     const ctx = canvas.getContext('2d')
 
diff --git a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js
index abe1b2ff350b..ca079867893a 100644
--- a/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js
+++ b/packages/taro-h5/src/api/canvas/canvasToTempFilePath.js
@@ -1,4 +1,4 @@
-import { findDOMNode } from 'nervjs'
+import { findRef } from '../utils/index'
 
 /**
  * @typedef {Object} Param
@@ -22,11 +22,12 @@ import { findDOMNode } from 'nervjs'
  * @param {Object} componentInstance 在自定义组件下，当前组件实例的this，以操作组件内 <canvas> 组件
  * @todo 暂未支持尺寸相关功能
  */
-const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }, componentInstance=document.body) => {
-  const dom = findDOMNode(componentInstance)
+const canvasToTempFilePath = ({ canvasId, fileType, quality, success, fail, complete }, componentInstance) => {
+  const refId = `__taroref_${canvasId}`
+  const component = findRef(refId, componentInstance)
 
   /** @type {HTMLCanvasElement} */
-  const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
+  const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);
 
   try {
     // /** @type {CanvasRenderingContext2D} */
diff --git a/packages/taro-h5/src/api/canvas/createCanvasContext.js b/packages/taro-h5/src/api/canvas/createCanvasContext.js
index 5a5ef167e83f..81adba08256b 100644
--- a/packages/taro-h5/src/api/canvas/createCanvasContext.js
+++ b/packages/taro-h5/src/api/canvas/createCanvasContext.js
@@ -1,15 +1,16 @@
-import { findDOMNode } from 'nervjs'
-import { isFunction } from '../utils/index'
+import { isFunction, findRef } from '../utils/index'
 
 /**
 * 创建 canvas 的绘图上下文 CanvasContext 对象
 * @param {string} canvasId 要获取上下文的 <canvas> 组件 canvas-id 属性
 * @param {Object} componentInstance 在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas> ，如果省略则不在任何自定义组件内查找
 */
-const createCanvasContext = (canvasId, componentInstance=document.body) => {
-  const dom = findDOMNode(componentInstance)
+const createCanvasContext = (canvasId, componentInstance) => {
+  const refId = `__taroref_${canvasId}`
+  const component = findRef(refId, componentInstance)
+
   /** @type {HTMLCanvasElement} */
-  const canvas = dom.querySelector(`[canvasId=${canvasId}]`);
+  const canvas = component.vnode.dom.querySelector(`[canvasId=${canvasId}]`);
   
   /** @type {CanvasRenderingContext2D} */
   const ctx = canvas.getContext('2d');
diff --git a/packages/taro/types/index.d.ts b/packages/taro/types/index.d.ts
index 49294871262f..935158d15e93 100644
--- a/packages/taro/types/index.d.ts
+++ b/packages/taro/types/index.d.ts
@@ -7819,6 +7819,13 @@ declare namespace Taro {
        */
       complete?: Param0PropComplete
     }
+
+    type Promised = {
+      /** errMsg */
+      errMsg: string
+      /** 生成文件的临时路径 */
+      tempFilePath: string
+    }
     /**
      * 接口调用成功的回调函数
      */
@@ -7857,7 +7864,7 @@ declare namespace Taro {
    *     ```
    * @see https://developers.weixin.qq.com/miniprogram/dev/api/canvas/temp-file.html#wxcanvastotempfilepathobject-this
    */
-  function canvasToTempFilePath(OBJECT: canvasToTempFilePath.Param0, instance?: any): void
+  function canvasToTempFilePath(OBJECT: canvasToTempFilePath.Param0, instance?: any): Promise<canvasToTempFilePath.Promised>
 
   namespace canvasGetImageData {
     type Promised = {