diff --git a/packages/core/__tests__/data.ts b/packages/core/__tests__/data.ts
index 86cd4ee..935bdb7 100644
--- a/packages/core/__tests__/data.ts
+++ b/packages/core/__tests__/data.ts
@@ -8,7 +8,7 @@ const data = {
       h: 100,
       type: 'rect',
       desc: {
-        color: '#f0f0f0',
+        bgColor: '#f0f0f0',
         borderRadius: 20,
         borderWidth: 10,
         borderColor: '#bd0b64',
diff --git a/packages/core/__tests__/lib/core-check.test.ts b/packages/core/__tests__/lib/core-check.test.ts
index 6463c9a..898258e 100644
--- a/packages/core/__tests__/lib/core-check.test.ts
+++ b/packages/core/__tests__/lib/core-check.test.ts
@@ -32,18 +32,18 @@ describe("@idraw/core static check", () => {
   test('Core.check.rectDesc', () => {
 
     expect(Core.check.rectDesc({
-      color: '#ffffff',
+      bgColor: '#ffffff',
     })).toStrictEqual(true);
 
     expect(Core.check.rectDesc({
-      color: 123,
+      bgColor: 123,
     })).toStrictEqual(false);
 
     expect(Core.check.rectDesc({
       borderRadius: 12,
       borderWidth: 10,
       borderColor: '#123abf',
-      color: '#ffffff',
+      bgColor: '#ffffff',
     })).toStrictEqual(true);
 
     expect(Core.check.rectDesc({
@@ -58,17 +58,17 @@ describe("@idraw/core static check", () => {
   test('Core.check.circleDesc', () => {
 
     expect(Core.check.circleDesc({
-      color: '#ffffff',
+      bgColor: '#ffffff',
     })).toStrictEqual(true);
 
     expect(Core.check.circleDesc({
-      color: 123,
+      bgColor: 123,
     })).toStrictEqual(false);
 
     expect(Core.check.circleDesc({
       borderWidth: 10,
       borderColor: '#123abf',
-      color: '#ffffff',
+      bgColor: '#ffffff',
     })).toStrictEqual(true);
 
     expect(Core.check.circleDesc({
diff --git a/packages/core/examples/features/lib/data/circle.js b/packages/core/examples/features/lib/data/circle.js
index c08dc11..e2194a4 100644
--- a/packages/core/examples/features/lib/data/circle.js
+++ b/packages/core/examples/features/lib/data/circle.js
@@ -9,7 +9,7 @@ const data = {
       h: 100,
       type: "circle",
       desc: {
-        color: "#f0f0f0",
+        bgColor: "#f0f0f0",
         borderWidth: 2,
         borderColor: '#999999'
       },
@@ -23,7 +23,7 @@ const data = {
       angle: 30,
       type: "circle",
       desc: {
-        color: "#f0f0f0",
+        bgColor: "#f0f0f0",
         borderWidth: 2,
         borderColor: '#666666'
       },
@@ -37,7 +37,7 @@ const data = {
       type: "circle",
       angle: 0,
       desc: {
-        color: "#f0f0f0",
+        bgColor: "#f0f0f0",
         borderWidth: 2,
         borderColor: '#666666'
       },
@@ -50,7 +50,7 @@ const data = {
       h: 300,
       type: "circle",
       desc: {
-        color: "#f0f0f0",
+        bgColor: "#f0f0f0",
         borderWidth: 10,
         borderColor: '#666666'
       },
diff --git a/packages/core/examples/features/lib/data/rect.js b/packages/core/examples/features/lib/data/rect.js
index e76a396..2a0e72a 100644
--- a/packages/core/examples/features/lib/data/rect.js
+++ b/packages/core/examples/features/lib/data/rect.js
@@ -9,7 +9,7 @@ const data = {
       h: 100,
       type: "rect",
       desc: {
-        color: "#f0f0f0",
+        bgColor: "#f0f0f0",
         borderRadius: 20,
         borderWidth: 10,
         borderColor: "#bd0b64",
@@ -27,7 +27,7 @@ const data = {
         lock: true,
       },
       desc: {
-        color: "#cccccc",
+        bgColor: "#cccccc",
         borderRadius: 60,
         borderWidth: 10,
         borderColor: "#bd0b64",
@@ -42,7 +42,7 @@ const data = {
       type: "rect",
       angle: 80,
       desc: {
-        color: "#c0c0c0",
+        bgColor: "#c0c0c0",
         borderRadius: 20,
         borderWidth: 10,
         borderColor: "#bd0b64",
@@ -56,7 +56,7 @@ const data = {
       h: 100,
       type: "rect",
       desc: {
-        color: "#e0e0e0",
+        bgColor: "#e0e0e0",
         borderRadius: 20,
         borderWidth: 10,
         borderColor: "#bd0b64",
diff --git a/packages/core/examples/test/api.html b/packages/core/examples/test/api.html
index 5861f17..76b7e6d 100644
--- a/packages/core/examples/test/api.html
+++ b/packages/core/examples/test/api.html
@@ -369,7 +369,7 @@
           h: 60,
           type: "rect",
           desc: {
-            color: "#8bc34a",
+            bgColor: "#8bc34a",
             borderWidth: 4,
             borderRadius: 0,
             borderColor: "#009688",
diff --git a/packages/core/examples/test/data.js b/packages/core/examples/test/data.js
index 9cff158..5e8f82e 100644
--- a/packages/core/examples/test/data.js
+++ b/packages/core/examples/test/data.js
@@ -9,7 +9,7 @@ const data = {
       h: 50,
       type: "rect",
       desc: {
-        color: "#ffeb3b",
+        bgColor: "#ffeb3b",
         borderRadius: 10,
         borderWidth: 5,
         borderColor: "#ffc107",
diff --git a/packages/core/examples/test/elements.html b/packages/core/examples/test/elements.html
index b0bf694..1fd2d65 100644
--- a/packages/core/examples/test/elements.html
+++ b/packages/core/examples/test/elements.html
@@ -146,7 +146,7 @@
           h: 60,
           type: "rect",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -160,7 +160,7 @@
           h: 80,
           type: "rect",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -181,7 +181,7 @@
           h: 100,
           type: "circle",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -195,7 +195,7 @@
           h: 80,
           type: "circle",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -396,7 +396,7 @@
           h: 60,
           type: "rect",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -410,7 +410,7 @@
           h: 80,
           type: "rect",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -438,7 +438,7 @@
           },
           type: "rect",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -452,7 +452,7 @@
           h: 80,
           type: "rect",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -480,7 +480,7 @@
             invisible: true,
           },
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
@@ -494,7 +494,7 @@
           h: 80,
           type: "rect",
           desc: {
-            color: "#c6e0f5",
+            bgColor: "#c6e0f5",
             borderRadius: 8,
             borderWidth: 2,
             borderColor: "#2196f3",
diff --git a/packages/core/src/lib/check.ts b/packages/core/src/lib/check.ts
index 1764b69..4c47fbc 100644
--- a/packages/core/src/lib/check.ts
+++ b/packages/core/src/lib/check.ts
@@ -35,8 +35,8 @@ function box(
 function rectDesc(
   desc: any
 ): boolean {
-  const { color } = desc;
-  if (desc.hasOwnProperty('color') && !is.color(color)) {
+  const { bgColor } = desc;
+  if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
     return false;
   }
   if (!box(desc)) {
@@ -48,8 +48,8 @@ function rectDesc(
 function circleDesc(
   desc: any
 ): boolean {
-  const { color, borderColor, borderWidth } = desc;
-  if (desc.hasOwnProperty('color') && !is.color(color)) {
+  const { bgColor, borderColor, borderWidth } = desc;
+  if (desc.hasOwnProperty('bgColor') && !is.color(bgColor)) {
     return false;
   }
   if (desc.hasOwnProperty('borderColor') && !is.color(borderColor)) {
diff --git a/packages/core/src/lib/draw/circle.ts b/packages/core/src/lib/draw/circle.ts
index c959de0..0c62d36 100644
--- a/packages/core/src/lib/draw/circle.ts
+++ b/packages/core/src/lib/draw/circle.ts
@@ -9,7 +9,7 @@ export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) {
   rotateElement(ctx, elem, (ctx) => {
     const { x, y, w, h, desc } = elem;
     const {
-      color = '#000000',
+      bgColor = '#000000',
       borderColor = '#000000',
       borderWidth
     } = desc;
@@ -33,7 +33,7 @@ export function drawCircle(ctx: TypeContext, elem: TypeElement<'circle'>) {
     }
 
     ctx.beginPath();
-    ctx.setFillStyle(color);
+    ctx.setFillStyle(bgColor);
     ctx.moveTo(centerX + a, centerY);
     for(var i = 0; i < 2 * Math.PI; i += unit) {
       ctx.lineTo(centerX + a * Math.cos(i), centerY + b * Math.sin(i));
diff --git a/packages/core/src/lib/draw/rect.ts b/packages/core/src/lib/draw/rect.ts
index 6ec254f..f6c9ebf 100644
--- a/packages/core/src/lib/draw/rect.ts
+++ b/packages/core/src/lib/draw/rect.ts
@@ -5,7 +5,7 @@ import {
 import { drawBox } from './base';
  
 export function drawRect(ctx: TypeContext, elem: TypeElement<'rect'>) {
-  drawBox(ctx, elem, elem.desc.color as string);
+  drawBox(ctx, elem, elem.desc.bgColor as string);
 }
 
  
diff --git a/packages/idraw/examples/features/lib/data.js b/packages/idraw/examples/features/lib/data.js
index 29ac21d..fb7d61c 100644
--- a/packages/idraw/examples/features/lib/data.js
+++ b/packages/idraw/examples/features/lib/data.js
@@ -8,7 +8,7 @@ export default {
       h: 100,
       type: 'rect',
       desc: {
-        color: '#f0f0f0',
+        bgColor: '#f0f0f0',
         borderRadius: 20,
         borderWidth: 10,
         borderColor: '#bd0b64',
diff --git a/packages/idraw/examples/test/api.html b/packages/idraw/examples/test/api.html
index 4c803fd..737dceb 100644
--- a/packages/idraw/examples/test/api.html
+++ b/packages/idraw/examples/test/api.html
@@ -67,7 +67,7 @@
             h: 50,
             type: "rect",
             desc: {
-              color: "#ffeb3b",
+              bgColor: "#ffeb3b",
               borderRadius: 10,
               borderWidth: 5,
               borderColor: "#ffc107",
diff --git a/packages/types/src/lib/element.ts b/packages/types/src/lib/element.ts
index b8387c2..de10d0e 100644
--- a/packages/types/src/lib/element.ts
+++ b/packages/types/src/lib/element.ts
@@ -52,7 +52,7 @@ type TypeElemDesc = {
 type TypeElemType = 'text' | 'rect' | 'circle' | 'image' | 'svg' | 'html';
 
 type TypeElemDescRect = {
-  color?: string;
+  bgColor?: string;
 } & TypeElemBoxDesc
 
 type TypeElemDescText = {
@@ -67,7 +67,7 @@ type TypeElemDescText = {
 } & TypeElemBoxDesc
 
 type TypeElemDescCircle = {
-  color: string;
+  bgColor: string;
 } & TypeElemBoxDesc
 
 type TypeElemDescImage = {