diff --git a/package.json b/package.json
index f157b2a3..89bfba6d 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "rax-types": "^1.0.0",
     "semver": "^6.3.0",
     "semver-regex": "^3.1.3",
-    "shelljs": "0.8.3",
+    "shelljs": "0.8.5",
     "typescript": "^3.8.3"
   },
   "resolutions": {
diff --git a/packages/rax-qrcode/CHANGELOG.md b/packages/rax-qrcode/CHANGELOG.md
index 155767b9..88c895ab 100644
--- a/packages/rax-qrcode/CHANGELOG.md
+++ b/packages/rax-qrcode/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## 3.0.0
+
+- [feat] update rax-canvas version to v2.0
+- [feat] support passing strings with px of width and height in style 
+
 ## 2.0.2
 
-- [fix] can't get correct screenWidth in some Android Phones, use windowWidth instead
\ No newline at end of file
+- [fix] can't get correct screenWidth in some Android Phones, use windowWidth instead
diff --git a/packages/rax-qrcode/demo/index.md b/packages/rax-qrcode/demo/index.md
index 7fcdc302..b30586e6 100644
--- a/packages/rax-qrcode/demo/index.md
+++ b/packages/rax-qrcode/demo/index.md
@@ -16,7 +16,7 @@ function App() {
   return (
     <QRCode
       data="http://market.m.taobao.com/apps/market/m-vip/88-festival.html?wh_weex=true&wx_navbar_transparent=true"
-      style={{ width: 400, height: 400 }}
+      style={{ width: '400', height: '400' }}
     />
   );
 }
diff --git a/packages/rax-qrcode/package.json b/packages/rax-qrcode/package.json
index d57e6daa..244f7366 100644
--- a/packages/rax-qrcode/package.json
+++ b/packages/rax-qrcode/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-qrcode",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "description": "QRCode component for Rax.",
   "license": "BSD-3-Clause",
   "main": "lib/index.js",
@@ -31,7 +31,7 @@
   ],
   "dependencies": {
     "qr.js": "0.0.0",
-    "rax-canvas": "^1.0.0"
+    "rax-canvas": "^2.0.0"
   },
   "peerDependencies": {
     "rax": "^1.0.0"
diff --git a/packages/rax-qrcode/src/index.tsx b/packages/rax-qrcode/src/index.tsx
index a40383c8..ef429b39 100644
--- a/packages/rax-qrcode/src/index.tsx
+++ b/packages/rax-qrcode/src/index.tsx
@@ -30,6 +30,25 @@ const styles = {
   }
 };
 
+const ENDS_WITH_PX_EXCEPT_RPX = /^[0-9\.]+\s*([^r]px)?$/;
+
+function processDimensions(width: string | number, height: string | number) {
+  let w = width;
+  let h = height;
+  if (typeof width === 'string' && ENDS_WITH_PX_EXCEPT_RPX.test(width)){
+    w = parseFloat(width);
+  }
+
+  if (typeof height === 'string' && ENDS_WITH_PX_EXCEPT_RPX.test(height)){
+    h = parseFloat(height);
+  }
+
+  return {
+    width: w as number,
+    height: h as number
+  };
+}
+
 class QRCode extends Component<QRCodeProps, {}> {
   public width = 0;
   public height = 0;
@@ -38,7 +57,7 @@ class QRCode extends Component<QRCodeProps, {}> {
   public constructor(props) {
     super(props);
     const { style = {} } = props;
-    const { width = 300, height = 300 } = style;
+    const { width, height } = processDimensions(style.width || 300, style.height || 300);
     this.width = width;
     this.height = height;
     this.canvas = createRef();