diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/pencil-pointer-listener/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/pencil-pointer-listener/component.jsx
index d15f3347a02757399ee2351955bdb1d164144d8b..1db5d2b5fd1171238b5e361d8dd497daba71b2c1 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/pencil-pointer-listener/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/pencil-pointer-listener/component.jsx
@@ -25,7 +25,7 @@ export default class PencilPointerListener extends Component {
     this.handlePointerDown = this.handlePointerDown.bind(this);
     this.handlePointerUp = this.handlePointerUp.bind(this);
     this.handlePointerMove = this.handlePointerMove.bind(this);
-    this.handlePointerCancle = this.handlePointerCancle.bind(this);
+    this.handlePointerCancel = this.handlePointerCancel.bind(this);
 
     this.resetState = this.resetState.bind(this);
     this.sendLastMessage = this.sendLastMessage.bind(this);
@@ -183,7 +183,7 @@ export default class PencilPointerListener extends Component {
     // remove event listener
     window.removeEventListener('pointerup', this.handlePointerUp);
     window.removeEventListener('pointermove', this.handlePointerMove);
-    window.removeEventListener('pointercancle', this.handlePointerCancle, true);
+    window.removeEventListener('pointercancel', this.handlePointerCancel, true);
   }
 
   discardAnnotation() {
@@ -245,7 +245,7 @@ export default class PencilPointerListener extends Component {
     if (!this.isDrawing) {
       window.addEventListener('pointerup', this.handlePointerUp);
       window.addEventListener('pointermove', this.handlePointerMove);
-      window.addEventListener('pointercancle', this.handlePointerCancle, true);
+      window.addEventListener('pointercancel', this.handlePointerCancel, true);
 
       const { clientX, clientY } = event;
       this.commonDrawStartHandler(clientX, clientY);
@@ -306,7 +306,7 @@ export default class PencilPointerListener extends Component {
     }
   }
 
-  handlePointerCancle(event) {
+  handlePointerCancel(event) {
     switch (event.pointerType) {
       case 'pen': {
         this.sendLastMessage();
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-pointer-listener/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-pointer-listener/component.jsx
index a75939a5d85888543463afcd687d8be490fe0ad4..035fa37cfad09b8ada7c693373ff85be2146ee29 100755
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-pointer-listener/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/whiteboard-overlay/shape-pointer-listener/component.jsx
@@ -39,7 +39,7 @@ export default class ShapePointerListener extends Component {
     this.handlePointerDown = this.handlePointerDown.bind(this);
     this.handlePointerUp = this.handlePointerUp.bind(this);
     this.handlePointerMove = this.handlePointerMove.bind(this);
-    this.handlePointerCancle = this.handlePointerCancle.bind(this);
+    this.handlePointerCancel = this.handlePointerCancel.bind(this);
 
     this.resetState = this.resetState.bind(this);
     this.sendLastMessage = this.sendLastMessage.bind(this);
@@ -207,7 +207,7 @@ export default class ShapePointerListener extends Component {
     // remove event handler
     window.removeEventListener('pointerup', this.handlePointerUp);
     window.removeEventListener('pointermove', this.handlePointerMove);
-    window.removeEventListener('pointercancle', this.handlePointerCancle, true);
+    window.removeEventListener('pointercancel', this.handlePointerCancel, true);
   }
 
   // since Rectangle / Triangle / Ellipse / Line have the same coordinate structure
@@ -315,7 +315,7 @@ export default class ShapePointerListener extends Component {
     if (!this.isDrawing) {
       window.addEventListener('pointerup', this.handlePointerUp);
       window.addEventListener('pointermove', this.handlePointerMove);
-      window.addEventListener('pointercancle', this.handlePointerCancle, true);
+      window.addEventListener('pointercancel', this.handlePointerCancel, true);
 
       const { clientX, clientY } = event;
       this.commonDrawStartHandler(clientX, clientY);
@@ -376,7 +376,7 @@ export default class ShapePointerListener extends Component {
     }
   }
 
-  handlePointerCancle(event) {
+  handlePointerCancel(event) {
     switch (event.pointerType) {
       case 'pen': {
         this.sendLastMessage();