diff --git a/src/ViewerCavans.tsx b/src/ViewerCanvas.tsx
similarity index 93%
rename from src/ViewerCavans.tsx
rename to src/ViewerCanvas.tsx
index 795ebfb..55c7bbc 100644
--- a/src/ViewerCavans.tsx
+++ b/src/ViewerCanvas.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import Loading from './Loading';
 
-export interface ViewerCavansProps {
+export interface ViewerCanvasProps {
   prefixCls: string;
   imgSrc: string;
   visible: boolean;
@@ -20,13 +20,13 @@ export interface ViewerCavansProps {
   drag: boolean;
 }
 
-export interface ViewerCavansState {
+export interface ViewerCanvasState {
   isMouseDown?: boolean;
   mouseX?: number;
   mouseY?: number;
 }
 
-export default class ViewerCavans extends React.Component<ViewerCavansProps, ViewerCavansState> {
+export default class ViewerCanvas extends React.Component<ViewerCanvasProps, ViewerCanvasState> {
 
   constructor() {
     super();
@@ -111,7 +111,7 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
     document[funcName]('mousemove', this.handleMouseMove, false);
   }
 
-  componentWillReceiveProps(nextProps: ViewerCavansProps) {
+  componentWillReceiveProps(nextProps: ViewerCanvasProps) {
     if (!this.props.visible && nextProps.visible) {
       if (nextProps.drag) {
         return this.bindEvent();
@@ -168,7 +168,7 @@ export default class ViewerCavans extends React.Component<ViewerCavansProps, Vie
 
     return (
       <div
-      className={`${this.props.prefixCls}-cavans`}
+      className={`${this.props.prefixCls}-canvas`}
       onMouseDown={this.handleMouseDown}
       style={style}
       >
diff --git a/src/ViewerCore.tsx b/src/ViewerCore.tsx
index 9819121..56856eb 100644
--- a/src/ViewerCore.tsx
+++ b/src/ViewerCore.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import './style/index.less';
-import ViewerCavans from './ViewerCavans';
+import ViewerCanvas from './ViewerCanvas';
 import ViewerNav from './ViewerNav';
 import ViewerToolbar from './ViewerToolbar';
 import ViewerProps, { ImageDecorator } from './ViewerProps';
@@ -445,7 +445,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
         >
           <Icon type={ActionType.close}/>
         </div>
-        <ViewerCavans
+        <ViewerCanvas
         prefixCls={this.prefixCls}
         imgSrc={activeImg.src}
         visible={this.props.visible}
diff --git a/src/style/index.less b/src/style/index.less
index 5f225eb..6f2cfcf 100644
--- a/src/style/index.less
+++ b/src/style/index.less
@@ -76,7 +76,7 @@
     left: 18px;
   }
 
-  &-cavans {
+  &-canvas {
     position: absolute;
     top: 0;
     right: 0;