diff --git a/pages/component/canvas/canvas-context.uvue b/pages/component/canvas/canvas-context.uvue
index e930ba2f4786c2546ae1196094a2f4502e48a91a..cf821aac96a9b4f5bc4b80a05aa6229c476e189f 100644
--- a/pages/component/canvas/canvas-context.uvue
+++ b/pages/component/canvas/canvas-context.uvue
@@ -371,7 +371,7 @@
       pattern() {
         const context = this.renderingContext!
 
-        const image = new Image(100, 100)
+        const image = this.canvasContext!.createImage()
         image.src = '../../../static/api.png';
         image.onload = () => {
           context.save()
@@ -556,7 +556,7 @@
         context.fillText("Circle!", 265, 100)
         // context.reset()
 
-        hidpi(uni.getElementById("canvas") as UniCanvasElement)
+        hidpi(this.canvas!)
       },
       translate() {
         const context = this.renderingContext!
@@ -602,7 +602,7 @@
       },
       drawImageLocal() {
         const context = this.renderingContext!
-        const image = new Image(100, 100)
+        const image = this.canvasContext!.createImage();
         image.src = '../../../static/uni.png'
         image.onload = () => {
           context.drawImage(image, 0, 0, 100, 100)
@@ -610,7 +610,7 @@
       },
       drawImage() {
         const context = this.renderingContext!
-        const image = new Image(100, 100);
+        const image = this.canvasContext!.createImage();
         image.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png'
         image.onload = () => {
           context.drawImage(image, 0, 0, 100, 100)