diff --git a/__tests__/demos/canvas/index.ts b/__tests__/demos/canvas/index.ts
new file mode 100644
index 000000000..f2931255d
--- /dev/null
+++ b/__tests__/demos/canvas/index.ts
@@ -0,0 +1 @@
+export { switchRenderer } from './switch-renderer';
diff --git a/__tests__/demos/canvas/switch-renderer.ts b/__tests__/demos/canvas/switch-renderer.ts
new file mode 100644
index 000000000..8aefdf6cb
--- /dev/null
+++ b/__tests__/demos/canvas/switch-renderer.ts
@@ -0,0 +1,37 @@
+import { Circle } from '../../../packages/g';
+import { Renderer as CanvasRenderer } from '../../../packages/g-canvas';
+import { Renderer as SVGRenderer } from '../../../packages/g-svg';
+import { Renderer as WebGLRenderer } from '../../../packages/g-webgl';
+
+export async function switchRenderer(context) {
+  const { canvas, gui } = context;
+
+  await canvas.ready;
+
+  const circle = new Circle({
+    style: {
+      cx: 100,
+      cy: 100,
+      r: 50,
+      fill: 'red',
+    },
+  });
+
+  canvas.appendChild(circle);
+
+  const folder = gui.addFolder('renderer');
+  folder
+    .add({ renderer: 'canvas' }, 'renderer', ['canvas', 'svg', 'webgl'])
+    .onChange((name) => {
+      let renderer;
+      if (name === 'canvas') renderer = new CanvasRenderer();
+      else if (name === 'svg') renderer = new SVGRenderer();
+      else if (name === 'webgl') renderer = new WebGLRenderer();
+
+      canvas.setRenderer(renderer);
+
+      canvas.ready.then(() => {
+        alert(`Switch to ${name} renderer`);
+      });
+    });
+}
diff --git a/__tests__/main.ts b/__tests__/main.ts
index f1b084eda..1964d72ff 100644
--- a/__tests__/main.ts
+++ b/__tests__/main.ts
@@ -18,6 +18,7 @@ import * as perf from './demos/perf';
 import * as bugfix from './demos/bugfix';
 import * as event from './demos/event';
 import * as camera from './demos/camera';
+import * as canvasCase from './demos/canvas';
 
 const tests = {
   ...createSpecRender(namespace(basic2d, '2d')),
@@ -31,6 +32,7 @@ const tests = {
   ...createSpecRender(namespace(perf, 'perf')),
   ...createSpecRender(namespace(event, 'event')),
   ...createSpecRender(namespace(camera, 'camera')),
+  ...createSpecRender(namespace(canvasCase, 'canvas')),
 };
 
 const renderers = {
diff --git a/packages/g-lite/src/Canvas.ts b/packages/g-lite/src/Canvas.ts
index 57f4d4398..0f25911ee 100644
--- a/packages/g-lite/src/Canvas.ts
+++ b/packages/g-lite/src/Canvas.ts
@@ -570,13 +570,14 @@ export class Canvas extends EventTarget implements ICanvas {
         } else {
           this.dispatchEvent(new CustomEvent(CanvasEvent.READY));
         }
-        if (this.readyPromise) {
-          this.resolveReadyPromise();
-        }
       } else {
         this.dispatchEvent(new CustomEvent(CanvasEvent.RENDERER_CHANGED));
       }
 
+      if (this.readyPromise) {
+        this.resolveReadyPromise();
+      }
+
       if (!firstContentfullPaint) {
         this.getRoot().forEach((node) => {
           const renderable = (node as Element).renderable;