diff --git a/public/index.html b/public/index.html
index a748f696..ab820bfa 100644
--- a/public/index.html
+++ b/public/index.html
@@ -81,35 +81,38 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <h1 class="visually-hidden">Excalidraw</h1>
+    <header>
+      <h1 class="visually-hidden">Excalidraw</h1>
+    </header>
     <div id="root"></div>
-
-    <!-- https://github.com/tholman/github-corners -->
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="40"
-      height="40"
-      viewBox="0 0 250 250"
-      style="position: absolute; top: 0; right: 0"
-    >
-      <a
-        href="https://github.com/excalidraw/excalidraw"
-        target="_blank"
-        aria-label="GitHub repository"
+    <aside>
+      <!-- https://github.com/tholman/github-corners -->
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="40"
+        height="40"
+        viewBox="0 0 250 250"
+        style="position: absolute; top: 0; right: 0"
       >
-        <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
-        <path
-          class="octo-arm"
-          d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
-          style="transform-origin: 130px 106px"
-          fill="#fff"
-        />
-        <path
-          class="octo-body"
-          d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
-          fill="#fff"
-        />
-      </a>
-    </svg>
+        <a
+          href="https://github.com/excalidraw/excalidraw"
+          target="_blank"
+          aria-label="GitHub repository"
+        >
+          <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#6c6c6c" />
+          <path
+            class="octo-arm"
+            d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+            style="transform-origin: 130px 106px"
+            fill="#fff"
+          />
+          <path
+            class="octo-body"
+            d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z"
+            fill="#fff"
+          />
+        </a>
+      </svg>
+    </aside>
   </body>
 </html>
diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 0eb33bba..79ccc572 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -38,7 +38,8 @@
     "cartoonist": "Cartoonist",
     "fileTitle": "File title",
     "colorPicker": "Color picker",
-    "canvasBackground": "Canvas background"
+    "canvasBackground": "Canvas background",
+    "drawingCanvas": "Drawing Canvas"
   },
   "buttons": {
     "clearReset": "Clear the canvas & reset background color",
@@ -48,7 +49,8 @@
     "save": "Save",
     "load": "Load",
     "getShareableLink": "Get shareable link",
-    "close": "Close"
+    "close": "Close",
+    "selectLanguage": "Select Language"
   },
   "alerts": {
     "clearReset": "This will clear the whole canvas. Are you sure?",
@@ -67,5 +69,10 @@
     "line": "Line",
     "text": "Text",
     "lock": "Keep selected tool active after drawing"
+  },
+  "headings": {
+    "canvasActions": "Canvas actions",
+    "selectedShapeActions": "Selected shape actions",
+    "shapes": "Shapes"
   }
 }
diff --git a/public/locales/es/translation.json b/public/locales/es/translation.json
index b30fac02..5c7a5a44 100644
--- a/public/locales/es/translation.json
+++ b/public/locales/es/translation.json
@@ -38,7 +38,8 @@
     "cartoonist": "Caricatura",
     "fileTitle": "Título del archivo",
     "colorPicker": "Selector de color",
-    "canvasBackground": "Fondo del lienzo"
+    "canvasBackground": "Fondo del lienzo",
+    "drawingCanvas": "Lienzo de dibujo"
   },
   "buttons": {
     "clearReset": "Limpiar lienzo y reiniciar el color de fondo",
@@ -49,7 +50,8 @@
     "load": "Cargar",
     "getShareableLink": "Obtener enlace para compartir",
     "showExportDialog": "Mostrar diálogo para exportar",
-    "close": "Cerrar"
+    "close": "Cerrar",
+    "selectLanguage": "Select Language"
   },
   "alerts": {
     "clearReset": "Esto limpiará todo el lienzo. Estás seguro?",
@@ -66,6 +68,12 @@
     "ellipse": "Elipse",
     "arrow": "Flecha",
     "line": "Línea",
-    "text": "Texto"
+    "text": "Texto",
+    "lock": "Mantener la herramienta seleccionada activa después de dibujar"
+  },
+  "headings": {
+    "canvasActions": "Acciones del lienzo",
+    "selectedShapeActions": "Acciones de la forma seleccionada",
+    "shapes": "Formas"
   }
 }
diff --git a/src/components/LanguageList.tsx b/src/components/LanguageList.tsx
index 3c704760..75d5ffb4 100644
--- a/src/components/LanguageList.tsx
+++ b/src/components/LanguageList.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useTranslation } from "react-i18next";
 
 export function LanguageList<T>({
   onClick,
@@ -9,12 +10,15 @@ export function LanguageList<T>({
   onClick: (value: string) => void;
   currentLanguage: string;
 }) {
+  const { t } = useTranslation();
+
   return (
     <React.Fragment>
       <select
         className="language-select"
         onChange={({ target }) => onClick(target.value)}
         value={currentLanguage}
+        aria-label={t("buttons.selectLanguage")}
       >
         {languages.map(language => (
           <option key={language.lng} value={language.lng}>
diff --git a/src/components/LockIcon.tsx b/src/components/LockIcon.tsx
index 053387da..d9713ad6 100644
--- a/src/components/LockIcon.tsx
+++ b/src/components/LockIcon.tsx
@@ -51,6 +51,7 @@ export function LockIcon(props: LockIconProps) {
         id={props.id}
         onChange={props.onChange}
         checked={props.checked}
+        aria-label={props.title}
       />
       <div className="ToolIcon__icon">
         {props.checked ? ICONS.CHECKED : ICONS.UNCHECKED}
diff --git a/src/index.tsx b/src/index.tsx
index 91f8ba9f..a6ed107d 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -606,83 +606,129 @@ export class App extends React.Component<any, AppState> {
         <FixedSideContainer side="top">
           <div className="App-menu App-menu_top">
             <Stack.Col gap={4} align="end">
-              <div className="App-right-menu">
-                <h2 className="visually-hidden">Canvas actions</h2>
+              <section
+                className="App-right-menu"
+                aria-labelledby="canvas-actions-title"
+              >
+                <h2 className="visually-hidden" id="canvas-actions-title">
+                  {t("headings.canvasActions")}
+                </h2>
                 <Island padding={4}>{this.renderCanvasActions()}</Island>
-              </div>
-              <div className="App-right-menu">
+              </section>
+              <section
+                className="App-right-menu"
+                aria-labelledby="selected-shape-title"
+              >
+                <h2 className="visually-hidden" id="selected-shape-title">
+                  {t("headings.selectedShapeActions")}
+                </h2>
                 {this.renderSelectedShapeActions(elements)}
-              </div>
-            </Stack.Col>
-            <Stack.Col gap={4} align="start">
-              <Stack.Row gap={1}>
-                <Island padding={1}>
-                  <h2 className="visually-hidden">Shapes</h2>
-                  <Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
-                </Island>
-                <LockIcon
-                  checked={this.state.elementLocked}
-                  onChange={() => {
-                    this.setState({
-                      elementLocked: !this.state.elementLocked,
-                      elementType: this.state.elementLocked
-                        ? "selection"
-                        : this.state.elementType,
-                    });
-                  }}
-                  title={t("toolBar.lock")}
-                />
-              </Stack.Row>
+              </section>
             </Stack.Col>
+            <section aria-labelledby="shapes-title">
+              <Stack.Col gap={4} align="start">
+                <Stack.Row gap={1}>
+                  <Island padding={1}>
+                    <h2 className="visually-hidden" id="shapes-title">
+                      {t("headings.shapes")}
+                    </h2>
+                    <Stack.Row gap={1}>{this.renderShapesSwitcher()}</Stack.Row>
+                  </Island>
+                  <LockIcon
+                    checked={this.state.elementLocked}
+                    onChange={() => {
+                      this.setState({
+                        elementLocked: !this.state.elementLocked,
+                        elementType: this.state.elementLocked
+                          ? "selection"
+                          : this.state.elementType,
+                      });
+                    }}
+                    title={t("toolBar.lock")}
+                  />
+                </Stack.Row>
+              </Stack.Col>
+            </section>
             <div />
           </div>
         </FixedSideContainer>
-        <canvas
-          id="canvas"
-          style={{
-            width: canvasWidth,
-            height: canvasHeight,
-          }}
-          width={canvasWidth * window.devicePixelRatio}
-          height={canvasHeight * window.devicePixelRatio}
-          ref={canvas => {
-            if (this.canvas === null) {
-              this.canvas = canvas;
-              this.rc = rough.canvas(this.canvas!);
-            }
-            if (this.removeWheelEventListener) {
-              this.removeWheelEventListener();
-              this.removeWheelEventListener = undefined;
-            }
-            if (canvas) {
-              canvas.addEventListener("wheel", this.handleWheel, {
-                passive: false,
-              });
-              this.removeWheelEventListener = () =>
-                canvas.removeEventListener("wheel", this.handleWheel);
-              // Whenever React sets the width/height of the canvas element,
-              // the context loses the scale transform. We need to re-apply it
-              if (
-                canvasWidth !== lastCanvasWidth ||
-                canvasHeight !== lastCanvasHeight
-              ) {
-                lastCanvasWidth = canvasWidth;
-                lastCanvasHeight = canvasHeight;
-                canvas
-                  .getContext("2d")!
-                  .scale(window.devicePixelRatio, window.devicePixelRatio);
+        <main>
+          <canvas
+            id="canvas"
+            style={{
+              width: canvasWidth,
+              height: canvasHeight,
+            }}
+            width={canvasWidth * window.devicePixelRatio}
+            height={canvasHeight * window.devicePixelRatio}
+            ref={canvas => {
+              if (this.canvas === null) {
+                this.canvas = canvas;
+                this.rc = rough.canvas(this.canvas!);
               }
-            }
-          }}
-          onContextMenu={e => {
-            e.preventDefault();
+              if (this.removeWheelEventListener) {
+                this.removeWheelEventListener();
+                this.removeWheelEventListener = undefined;
+              }
+              if (canvas) {
+                canvas.addEventListener("wheel", this.handleWheel, {
+                  passive: false,
+                });
+                this.removeWheelEventListener = () =>
+                  canvas.removeEventListener("wheel", this.handleWheel);
+                // Whenever React sets the width/height of the canvas element,
+                // the context loses the scale transform. We need to re-apply it
+                if (
+                  canvasWidth !== lastCanvasWidth ||
+                  canvasHeight !== lastCanvasHeight
+                ) {
+                  lastCanvasWidth = canvasWidth;
+                  lastCanvasHeight = canvasHeight;
+                  canvas
+                    .getContext("2d")!
+                    .scale(window.devicePixelRatio, window.devicePixelRatio);
+                }
+              }
+            }}
+            onContextMenu={e => {
+              e.preventDefault();
 
-            const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+              const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+
+              const element = getElementAtPosition(elements, x, y);
+              if (!element) {
+                ContextMenu.push({
+                  options: [
+                    navigator.clipboard && {
+                      label: t("labels.paste"),
+                      action: () => this.pasteFromClipboard(),
+                    },
+                    ...this.actionManager.getContextMenuItems(
+                      elements,
+                      this.state,
+                      this.syncActionResult,
+                      action => this.canvasOnlyActions.includes(action),
+                      t,
+                    ),
+                  ],
+                  top: e.clientY,
+                  left: e.clientX,
+                });
+                return;
+              }
+
+              if (!element.isSelected) {
+                elements = clearSelection(elements);
+                element.isSelected = true;
+                this.setState({});
+              }
 
-            const element = getElementAtPosition(elements, x, y);
-            if (!element) {
               ContextMenu.push({
                 options: [
+                  navigator.clipboard && {
+                    label: t("labels.copy"),
+                    action: this.copyToClipboard,
+                  },
                   navigator.clipboard && {
                     label: t("labels.paste"),
                     action: () => this.pasteFromClipboard(),
@@ -691,197 +737,586 @@ export class App extends React.Component<any, AppState> {
                     elements,
                     this.state,
                     this.syncActionResult,
-                    action => this.canvasOnlyActions.includes(action),
+                    action => !this.canvasOnlyActions.includes(action),
                     t,
                   ),
                 ],
                 top: e.clientY,
                 left: e.clientX,
               });
-              return;
-            }
+            }}
+            onMouseDown={e => {
+              if (lastMouseUp !== null) {
+                // Unfortunately, sometimes we don't get a mouseup after a mousedown,
+                // this can happen when a contextual menu or alert is triggered. In order to avoid
+                // being in a weird state, we clean up on the next mousedown
+                lastMouseUp(e);
+              }
 
-            if (!element.isSelected) {
-              elements = clearSelection(elements);
-              element.isSelected = true;
-              this.setState({});
-            }
+              // pan canvas on wheel button drag
+              if (e.button === 1) {
+                let { clientX: lastX, clientY: lastY } = e;
+                const onMouseMove = (e: MouseEvent) => {
+                  document.documentElement.style.cursor = `grabbing`;
+                  let deltaX = lastX - e.clientX;
+                  let deltaY = lastY - e.clientY;
+                  lastX = e.clientX;
+                  lastY = e.clientY;
+                  // We don't want to save history when panning around
+                  history.skipRecording();
+                  this.setState(state => ({
+                    scrollX: state.scrollX - deltaX,
+                    scrollY: state.scrollY - deltaY,
+                  }));
+                };
+                const onMouseUp = (lastMouseUp = (e: MouseEvent) => {
+                  lastMouseUp = null;
+                  resetCursor();
+                  window.removeEventListener("mousemove", onMouseMove);
+                  window.removeEventListener("mouseup", onMouseUp);
+                });
+                window.addEventListener("mousemove", onMouseMove, {
+                  passive: true,
+                });
+                window.addEventListener("mouseup", onMouseUp);
+                return;
+              }
 
-            ContextMenu.push({
-              options: [
-                navigator.clipboard && {
-                  label: t("labels.copy"),
-                  action: this.copyToClipboard,
-                },
-                navigator.clipboard && {
-                  label: t("labels.paste"),
-                  action: () => this.pasteFromClipboard(),
-                },
-                ...this.actionManager.getContextMenuItems(
+              // only handle left mouse button
+              if (e.button !== 0) return;
+              // fixes mousemove causing selection of UI texts #32
+              e.preventDefault();
+              // Preventing the event above disables default behavior
+              //  of defocusing potentially focused input, which is what we want
+              //  when clicking inside the canvas.
+              if (isInputLike(document.activeElement)) {
+                document.activeElement.blur();
+              }
+
+              // Handle scrollbars dragging
+              const {
+                isOverHorizontalScrollBar,
+                isOverVerticalScrollBar,
+              } = isOverScrollBars(
+                elements,
+                e.clientX - CANVAS_WINDOW_OFFSET_LEFT,
+                e.clientY - CANVAS_WINDOW_OFFSET_TOP,
+                canvasWidth,
+                canvasHeight,
+                this.state.scrollX,
+                this.state.scrollY,
+              );
+
+              const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+
+              const originX = x;
+              const originY = y;
+
+              let element = newElement(
+                this.state.elementType,
+                x,
+                y,
+                this.state.currentItemStrokeColor,
+                this.state.currentItemBackgroundColor,
+                this.state.currentItemFillStyle,
+                this.state.currentItemStrokeWidth,
+                this.state.currentItemRoughness,
+                this.state.currentItemOpacity,
+              );
+
+              if (isTextElement(element)) {
+                element = newTextElement(
+                  element,
+                  "",
+                  this.state.currentItemFont,
+                );
+              }
+
+              type ResizeTestType = ReturnType<typeof resizeTest>;
+              let resizeHandle: ResizeTestType = false;
+              let isResizingElements = false;
+              let draggingOccurred = false;
+              let hitElement: ExcalidrawElement | null = null;
+              let elementIsAddedToSelection = false;
+              if (this.state.elementType === "selection") {
+                const resizeElement = getElementWithResizeHandler(
                   elements,
+                  { x, y },
                   this.state,
-                  this.syncActionResult,
-                  action => !this.canvasOnlyActions.includes(action),
-                  t,
-                ),
-              ],
-              top: e.clientY,
-              left: e.clientX,
-            });
-          }}
-          onMouseDown={e => {
-            if (lastMouseUp !== null) {
-              // Unfortunately, sometimes we don't get a mouseup after a mousedown,
-              // this can happen when a contextual menu or alert is triggered. In order to avoid
-              // being in a weird state, we clean up on the next mousedown
-              lastMouseUp(e);
-            }
+                );
+                this.setState({
+                  resizingElement: resizeElement ? resizeElement.element : null,
+                });
+
+                if (resizeElement) {
+                  resizeHandle = resizeElement.resizeHandle;
+                  document.documentElement.style.cursor = getCursorForResizingElement(
+                    resizeElement,
+                  );
+                  isResizingElements = true;
+                } else {
+                  hitElement = getElementAtPosition(elements, x, y);
+                  // clear selection if shift is not clicked
+                  if (!hitElement?.isSelected && !e.shiftKey) {
+                    elements = clearSelection(elements);
+                  }
+
+                  // If we click on something
+                  if (hitElement) {
+                    // deselect if item is selected
+                    // if shift is not clicked, this will always return true
+                    // otherwise, it will trigger selection based on current
+                    // state of the box
+                    if (!hitElement.isSelected) {
+                      hitElement.isSelected = true;
+                      elementIsAddedToSelection = true;
+                    }
+
+                    // We duplicate the selected element if alt is pressed on Mouse down
+                    if (e.altKey) {
+                      elements = [
+                        ...elements.map(element => ({
+                          ...element,
+                          isSelected: false,
+                        })),
+                        ...elements
+                          .filter(element => element.isSelected)
+                          .map(element => {
+                            const newElement = duplicateElement(element);
+                            newElement.isSelected = true;
+                            return newElement;
+                          }),
+                      ];
+                    }
+                  }
+                }
+              } else {
+                elements = clearSelection(elements);
+              }
+
+              if (isTextElement(element)) {
+                let textX = e.clientX;
+                let textY = e.clientY;
+                if (!e.altKey) {
+                  const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
+                    x,
+                    y,
+                  );
+                  if (snappedToCenterPosition) {
+                    element.x = snappedToCenterPosition.elementCenterX;
+                    element.y = snappedToCenterPosition.elementCenterY;
+                    textX = snappedToCenterPosition.wysiwygX;
+                    textY = snappedToCenterPosition.wysiwygY;
+                  }
+                }
+
+                const resetSelection = () => {
+                  this.setState({
+                    draggingElement: null,
+                    editingElement: null,
+                    elementType: "selection",
+                  });
+                };
+
+                textWysiwyg({
+                  initText: "",
+                  x: textX,
+                  y: textY,
+                  strokeColor: this.state.currentItemStrokeColor,
+                  opacity: this.state.currentItemOpacity,
+                  font: this.state.currentItemFont,
+                  onSubmit: text => {
+                    if (text) {
+                      elements = [
+                        ...elements,
+                        {
+                          ...newTextElement(
+                            element,
+                            text,
+                            this.state.currentItemFont,
+                          ),
+                          isSelected: true,
+                        },
+                      ];
+                    }
+                    resetSelection();
+                  },
+                  onCancel: () => {
+                    resetSelection();
+                  },
+                });
+                this.setState({
+                  elementType: "selection",
+                  editingElement: element,
+                });
+                return;
+              }
+
+              elements = [...elements, element];
+              this.setState({ draggingElement: element });
+
+              let lastX = x;
+              let lastY = y;
+
+              if (isOverHorizontalScrollBar || isOverVerticalScrollBar) {
+                lastX = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
+                lastY = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
+              }
 
-            // pan canvas on wheel button drag
-            if (e.button === 1) {
-              let { clientX: lastX, clientY: lastY } = e;
               const onMouseMove = (e: MouseEvent) => {
-                document.documentElement.style.cursor = `grabbing`;
-                let deltaX = lastX - e.clientX;
-                let deltaY = lastY - e.clientY;
-                lastX = e.clientX;
-                lastY = e.clientY;
-                // We don't want to save history when panning around
+                const target = e.target;
+                if (!(target instanceof HTMLElement)) {
+                  return;
+                }
+
+                if (isOverHorizontalScrollBar) {
+                  const x = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
+                  const dx = x - lastX;
+                  // We don't want to save history when scrolling
+                  history.skipRecording();
+                  this.setState(state => ({ scrollX: state.scrollX - dx }));
+                  lastX = x;
+                  return;
+                }
+
+                if (isOverVerticalScrollBar) {
+                  const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
+                  const dy = y - lastY;
+                  // We don't want to save history when scrolling
+                  history.skipRecording();
+                  this.setState(state => ({ scrollY: state.scrollY - dy }));
+                  lastY = y;
+                  return;
+                }
+
+                if (isResizingElements && this.state.resizingElement) {
+                  const el = this.state.resizingElement;
+                  const selectedElements = elements.filter(el => el.isSelected);
+                  if (selectedElements.length === 1) {
+                    const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+                    const deltaX = x - lastX;
+                    const deltaY = y - lastY;
+                    const element = selectedElements[0];
+                    const isLinear =
+                      element.type === "line" || element.type === "arrow";
+                    switch (resizeHandle) {
+                      case "nw":
+                        element.width -= deltaX;
+                        element.x += deltaX;
+
+                        if (e.shiftKey) {
+                          if (isLinear) {
+                            resizePerfectLineForNWHandler(element, x, y);
+                          } else {
+                            element.y += element.height - element.width;
+                            element.height = element.width;
+                          }
+                        } else {
+                          element.height -= deltaY;
+                          element.y += deltaY;
+                        }
+                        break;
+                      case "ne":
+                        element.width += deltaX;
+                        if (e.shiftKey) {
+                          element.y += element.height - element.width;
+                          element.height = element.width;
+                        } else {
+                          element.height -= deltaY;
+                          element.y += deltaY;
+                        }
+                        break;
+                      case "sw":
+                        element.width -= deltaX;
+                        element.x += deltaX;
+                        if (e.shiftKey) {
+                          element.height = element.width;
+                        } else {
+                          element.height += deltaY;
+                        }
+                        break;
+                      case "se":
+                        if (e.shiftKey) {
+                          if (isLinear) {
+                            const { width, height } = getPerfectElementSize(
+                              element.type,
+                              x - element.x,
+                              y - element.y,
+                            );
+                            element.width = width;
+                            element.height = height;
+                          } else {
+                            element.width += deltaX;
+                            element.height = element.width;
+                          }
+                        } else {
+                          element.width += deltaX;
+                          element.height += deltaY;
+                        }
+                        break;
+                      case "n":
+                        element.height -= deltaY;
+                        element.y += deltaY;
+                        break;
+                      case "w":
+                        element.width -= deltaX;
+                        element.x += deltaX;
+                        break;
+                      case "s":
+                        element.height += deltaY;
+                        break;
+                      case "e":
+                        element.width += deltaX;
+                        break;
+                    }
+
+                    if (resizeHandle) {
+                      resizeHandle = normalizeResizeHandle(
+                        element,
+                        resizeHandle,
+                      );
+                    }
+                    normalizeDimensions(element);
+
+                    document.documentElement.style.cursor = getCursorForResizingElement(
+                      { element, resizeHandle },
+                    );
+                    el.x = element.x;
+                    el.y = element.y;
+                    el.shape = null;
+
+                    lastX = x;
+                    lastY = y;
+                    // We don't want to save history when resizing an element
+                    history.skipRecording();
+                    this.setState({});
+                    return;
+                  }
+                }
+
+                if (hitElement?.isSelected) {
+                  // Marking that click was used for dragging to check
+                  // if elements should be deselected on mouseup
+                  draggingOccurred = true;
+                  const selectedElements = elements.filter(el => el.isSelected);
+                  if (selectedElements.length) {
+                    const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+
+                    selectedElements.forEach(element => {
+                      element.x += x - lastX;
+                      element.y += y - lastY;
+                    });
+                    lastX = x;
+                    lastY = y;
+                    // We don't want to save history when dragging an element to initially size it
+                    history.skipRecording();
+                    this.setState({});
+                    return;
+                  }
+                }
+
+                // It is very important to read this.state within each move event,
+                // otherwise we would read a stale one!
+                const draggingElement = this.state.draggingElement;
+                if (!draggingElement) return;
+
+                const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+
+                let width = distance(originX, x);
+                let height = distance(originY, y);
+
+                const isLinear =
+                  this.state.elementType === "line" ||
+                  this.state.elementType === "arrow";
+
+                if (isLinear && x < originX) width = -width;
+                if (isLinear && y < originY) height = -height;
+
+                if (e.shiftKey) {
+                  ({ width, height } = getPerfectElementSize(
+                    this.state.elementType,
+                    width,
+                    !isLinear && y < originY ? -height : height,
+                  ));
+
+                  if (!isLinear && height < 0) height = -height;
+                }
+
+                if (!isLinear) {
+                  draggingElement.x = x < originX ? originX - width : originX;
+                  draggingElement.y = y < originY ? originY - height : originY;
+                }
+
+                draggingElement.width = width;
+                draggingElement.height = height;
+                draggingElement.shape = null;
+
+                if (this.state.elementType === "selection") {
+                  if (!e.shiftKey) {
+                    elements = clearSelection(elements);
+                  }
+                  const elementsWithinSelection = getElementsWithinSelection(
+                    elements,
+                    draggingElement,
+                  );
+                  elementsWithinSelection.forEach(element => {
+                    element.isSelected = true;
+                  });
+                }
+                // We don't want to save history when moving an element
                 history.skipRecording();
-                this.setState(state => ({
-                  scrollX: state.scrollX - deltaX,
-                  scrollY: state.scrollY - deltaY,
-                }));
+                this.setState({});
               };
-              const onMouseUp = (lastMouseUp = (e: MouseEvent) => {
+
+              const onMouseUp = (e: MouseEvent) => {
+                const {
+                  draggingElement,
+                  resizingElement,
+                  elementType,
+                  elementLocked,
+                } = this.state;
+
                 lastMouseUp = null;
-                resetCursor();
                 window.removeEventListener("mousemove", onMouseMove);
                 window.removeEventListener("mouseup", onMouseUp);
-              });
-              window.addEventListener("mousemove", onMouseMove, {
-                passive: true,
-              });
-              window.addEventListener("mouseup", onMouseUp);
-              return;
-            }
 
-            // only handle left mouse button
-            if (e.button !== 0) return;
-            // fixes mousemove causing selection of UI texts #32
-            e.preventDefault();
-            // Preventing the event above disables default behavior
-            //  of defocusing potentially focused input, which is what we want
-            //  when clicking inside the canvas.
-            if (isInputLike(document.activeElement)) {
-              document.activeElement.blur();
-            }
-
-            // Handle scrollbars dragging
-            const {
-              isOverHorizontalScrollBar,
-              isOverVerticalScrollBar,
-            } = isOverScrollBars(
-              elements,
-              e.clientX - CANVAS_WINDOW_OFFSET_LEFT,
-              e.clientY - CANVAS_WINDOW_OFFSET_TOP,
-              canvasWidth,
-              canvasHeight,
-              this.state.scrollX,
-              this.state.scrollY,
-            );
-
-            const { x, y } = viewportCoordsToSceneCoords(e, this.state);
-
-            const originX = x;
-            const originY = y;
-
-            let element = newElement(
-              this.state.elementType,
-              x,
-              y,
-              this.state.currentItemStrokeColor,
-              this.state.currentItemBackgroundColor,
-              this.state.currentItemFillStyle,
-              this.state.currentItemStrokeWidth,
-              this.state.currentItemRoughness,
-              this.state.currentItemOpacity,
-            );
-
-            if (isTextElement(element)) {
-              element = newTextElement(element, "", this.state.currentItemFont);
-            }
-
-            type ResizeTestType = ReturnType<typeof resizeTest>;
-            let resizeHandle: ResizeTestType = false;
-            let isResizingElements = false;
-            let draggingOccurred = false;
-            let hitElement: ExcalidrawElement | null = null;
-            let elementIsAddedToSelection = false;
-            if (this.state.elementType === "selection") {
-              const resizeElement = getElementWithResizeHandler(
-                elements,
-                { x, y },
-                this.state,
-              );
-              this.setState({
-                resizingElement: resizeElement ? resizeElement.element : null,
-              });
-
-              if (resizeElement) {
-                resizeHandle = resizeElement.resizeHandle;
-                document.documentElement.style.cursor = getCursorForResizingElement(
-                  resizeElement,
-                );
-                isResizingElements = true;
-              } else {
-                hitElement = getElementAtPosition(elements, x, y);
-                // clear selection if shift is not clicked
-                if (!hitElement?.isSelected && !e.shiftKey) {
-                  elements = clearSelection(elements);
+                if (
+                  elementType !== "selection" &&
+                  draggingElement &&
+                  isInvisiblySmallElement(draggingElement)
+                ) {
+                  // remove invisible element which was added in onMouseDown
+                  elements = elements.slice(0, -1);
+                  this.setState({
+                    draggingElement: null,
+                  });
+                  return;
                 }
 
-                // If we click on something
-                if (hitElement) {
-                  // deselect if item is selected
-                  // if shift is not clicked, this will always return true
-                  // otherwise, it will trigger selection based on current
-                  // state of the box
-                  if (!hitElement.isSelected) {
+                if (normalizeDimensions(draggingElement)) {
+                  this.setState({});
+                }
+
+                if (
+                  resizingElement &&
+                  isInvisiblySmallElement(resizingElement)
+                ) {
+                  elements = elements.filter(
+                    el => el.id !== resizingElement.id,
+                  );
+                }
+
+                // If click occurred on already selected element
+                // it is needed to remove selection from other elements
+                // or if SHIFT or META key pressed remove selection
+                // from hitted element
+                //
+                // If click occurred and elements were dragged or some element
+                // was added to selection (on mousedown phase) we need to keep
+                // selection unchanged
+                if (
+                  hitElement &&
+                  !draggingOccurred &&
+                  !elementIsAddedToSelection
+                ) {
+                  if (e.shiftKey) {
+                    hitElement.isSelected = false;
+                  } else {
+                    elements = clearSelection(elements);
                     hitElement.isSelected = true;
-                    elementIsAddedToSelection = true;
-                  }
-
-                  // We duplicate the selected element if alt is pressed on Mouse down
-                  if (e.altKey) {
-                    elements = [
-                      ...elements.map(element => ({
-                        ...element,
-                        isSelected: false,
-                      })),
-                      ...elements
-                        .filter(element => element.isSelected)
-                        .map(element => {
-                          const newElement = duplicateElement(element);
-                          newElement.isSelected = true;
-                          return newElement;
-                        }),
-                    ];
                   }
                 }
-              }
-            } else {
-              elements = clearSelection(elements);
-            }
 
-            if (isTextElement(element)) {
+                if (draggingElement === null) {
+                  // if no element is clicked, clear the selection and redraw
+                  elements = clearSelection(elements);
+                  this.setState({});
+                  return;
+                }
+
+                if (elementType === "selection") {
+                  elements = elements.slice(0, -1);
+                } else if (!elementLocked) {
+                  draggingElement.isSelected = true;
+                }
+
+                if (!elementLocked) {
+                  resetCursor();
+
+                  this.setState({
+                    draggingElement: null,
+                    elementType: "selection",
+                  });
+                }
+
+                history.resumeRecording();
+                this.setState({});
+              };
+
+              lastMouseUp = onMouseUp;
+
+              window.addEventListener("mousemove", onMouseMove);
+              window.addEventListener("mouseup", onMouseUp);
+
+              // We don't want to save history on mouseDown, only on mouseUp when it's fully configured
+              history.skipRecording();
+              this.setState({});
+            }}
+            onDoubleClick={e => {
+              const { x, y } = viewportCoordsToSceneCoords(e, this.state);
+
+              const elementAtPosition = getElementAtPosition(elements, x, y);
+
+              const element =
+                elementAtPosition && isTextElement(elementAtPosition)
+                  ? elementAtPosition
+                  : newTextElement(
+                      newElement(
+                        "text",
+                        x,
+                        y,
+                        this.state.currentItemStrokeColor,
+                        this.state.currentItemBackgroundColor,
+                        this.state.currentItemFillStyle,
+                        this.state.currentItemStrokeWidth,
+                        this.state.currentItemRoughness,
+                        this.state.currentItemOpacity,
+                      ),
+                      "", // default text
+                      this.state.currentItemFont, // default font
+                    );
+
+              this.setState({ editingElement: element });
+
               let textX = e.clientX;
               let textY = e.clientY;
-              if (!e.altKey) {
+
+              if (elementAtPosition && isTextElement(elementAtPosition)) {
+                elements = elements.filter(
+                  element => element.id !== elementAtPosition.id,
+                );
+                this.setState({});
+
+                textX =
+                  this.state.scrollX +
+                  elementAtPosition.x +
+                  CANVAS_WINDOW_OFFSET_LEFT +
+                  elementAtPosition.width / 2;
+                textY =
+                  this.state.scrollY +
+                  elementAtPosition.y +
+                  CANVAS_WINDOW_OFFSET_TOP +
+                  elementAtPosition.height / 2;
+
+                // x and y will change after calling newTextElement function
+                element.x = elementAtPosition.x + elementAtPosition.width / 2;
+                element.y = elementAtPosition.y + elementAtPosition.height / 2;
+              } else if (!e.altKey) {
                 const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
                   x,
                   y,
                 );
+
                 if (snappedToCenterPosition) {
                   element.x = snappedToCenterPosition.elementCenterX;
                   element.y = snappedToCenterPosition.elementCenterY;
@@ -899,22 +1334,20 @@ export class App extends React.Component<any, AppState> {
               };
 
               textWysiwyg({
-                initText: "",
+                initText: element.text,
                 x: textX,
                 y: textY,
-                strokeColor: this.state.currentItemStrokeColor,
+                strokeColor: element.strokeColor,
+                font: element.font,
                 opacity: this.state.currentItemOpacity,
-                font: this.state.currentItemFont,
                 onSubmit: text => {
                   if (text) {
                     elements = [
                       ...elements,
                       {
-                        ...newTextElement(
-                          element,
-                          text,
-                          this.state.currentItemFont,
-                        ),
+                        // we need to recreate the element to update dimensions &
+                        //  position
+                        ...newTextElement(element, text, element.font),
                         isSelected: true,
                       },
                     ];
@@ -925,443 +1358,47 @@ export class App extends React.Component<any, AppState> {
                   resetSelection();
                 },
               });
-              this.setState({
-                elementType: "selection",
-                editingElement: element,
-              });
-              return;
-            }
-
-            elements = [...elements, element];
-            this.setState({ draggingElement: element });
-
-            let lastX = x;
-            let lastY = y;
-
-            if (isOverHorizontalScrollBar || isOverVerticalScrollBar) {
-              lastX = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
-              lastY = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
-            }
-
-            const onMouseMove = (e: MouseEvent) => {
-              const target = e.target;
-              if (!(target instanceof HTMLElement)) {
+            }}
+            onMouseMove={e => {
+              const hasDeselectedButton = Boolean(e.buttons);
+              if (
+                hasDeselectedButton ||
+                this.state.elementType !== "selection"
+              ) {
                 return;
               }
-
-              if (isOverHorizontalScrollBar) {
-                const x = e.clientX - CANVAS_WINDOW_OFFSET_LEFT;
-                const dx = x - lastX;
-                // We don't want to save history when scrolling
-                history.skipRecording();
-                this.setState(state => ({ scrollX: state.scrollX - dx }));
-                lastX = x;
-                return;
-              }
-
-              if (isOverVerticalScrollBar) {
-                const y = e.clientY - CANVAS_WINDOW_OFFSET_TOP;
-                const dy = y - lastY;
-                // We don't want to save history when scrolling
-                history.skipRecording();
-                this.setState(state => ({ scrollY: state.scrollY - dy }));
-                lastY = y;
-                return;
-              }
-
-              if (isResizingElements && this.state.resizingElement) {
-                const el = this.state.resizingElement;
-                const selectedElements = elements.filter(el => el.isSelected);
-                if (selectedElements.length === 1) {
-                  const { x, y } = viewportCoordsToSceneCoords(e, this.state);
-                  const deltaX = x - lastX;
-                  const deltaY = y - lastY;
-                  const element = selectedElements[0];
-                  const isLinear =
-                    element.type === "line" || element.type === "arrow";
-                  switch (resizeHandle) {
-                    case "nw":
-                      element.width -= deltaX;
-                      element.x += deltaX;
-
-                      if (e.shiftKey) {
-                        if (isLinear) {
-                          resizePerfectLineForNWHandler(element, x, y);
-                        } else {
-                          element.y += element.height - element.width;
-                          element.height = element.width;
-                        }
-                      } else {
-                        element.height -= deltaY;
-                        element.y += deltaY;
-                      }
-                      break;
-                    case "ne":
-                      element.width += deltaX;
-                      if (e.shiftKey) {
-                        element.y += element.height - element.width;
-                        element.height = element.width;
-                      } else {
-                        element.height -= deltaY;
-                        element.y += deltaY;
-                      }
-                      break;
-                    case "sw":
-                      element.width -= deltaX;
-                      element.x += deltaX;
-                      if (e.shiftKey) {
-                        element.height = element.width;
-                      } else {
-                        element.height += deltaY;
-                      }
-                      break;
-                    case "se":
-                      if (e.shiftKey) {
-                        if (isLinear) {
-                          const { width, height } = getPerfectElementSize(
-                            element.type,
-                            x - element.x,
-                            y - element.y,
-                          );
-                          element.width = width;
-                          element.height = height;
-                        } else {
-                          element.width += deltaX;
-                          element.height = element.width;
-                        }
-                      } else {
-                        element.width += deltaX;
-                        element.height += deltaY;
-                      }
-                      break;
-                    case "n":
-                      element.height -= deltaY;
-                      element.y += deltaY;
-                      break;
-                    case "w":
-                      element.width -= deltaX;
-                      element.x += deltaX;
-                      break;
-                    case "s":
-                      element.height += deltaY;
-                      break;
-                    case "e":
-                      element.width += deltaX;
-                      break;
-                  }
-
-                  if (resizeHandle) {
-                    resizeHandle = normalizeResizeHandle(element, resizeHandle);
-                  }
-                  normalizeDimensions(element);
-
-                  document.documentElement.style.cursor = getCursorForResizingElement(
-                    { element, resizeHandle },
-                  );
-                  el.x = element.x;
-                  el.y = element.y;
-                  el.shape = null;
-
-                  lastX = x;
-                  lastY = y;
-                  // We don't want to save history when resizing an element
-                  history.skipRecording();
-                  this.setState({});
-                  return;
-                }
-              }
-
-              if (hitElement?.isSelected) {
-                // Marking that click was used for dragging to check
-                // if elements should be deselected on mouseup
-                draggingOccurred = true;
-                const selectedElements = elements.filter(el => el.isSelected);
-                if (selectedElements.length) {
-                  const { x, y } = viewportCoordsToSceneCoords(e, this.state);
-
-                  selectedElements.forEach(element => {
-                    element.x += x - lastX;
-                    element.y += y - lastY;
-                  });
-                  lastX = x;
-                  lastY = y;
-                  // We don't want to save history when dragging an element to initially size it
-                  history.skipRecording();
-                  this.setState({});
-                  return;
-                }
-              }
-
-              // It is very important to read this.state within each move event,
-              // otherwise we would read a stale one!
-              const draggingElement = this.state.draggingElement;
-              if (!draggingElement) return;
-
               const { x, y } = viewportCoordsToSceneCoords(e, this.state);
-
-              let width = distance(originX, x);
-              let height = distance(originY, y);
-
-              const isLinear =
-                this.state.elementType === "line" ||
-                this.state.elementType === "arrow";
-
-              if (isLinear && x < originX) width = -width;
-              if (isLinear && y < originY) height = -height;
-
-              if (e.shiftKey) {
-                ({ width, height } = getPerfectElementSize(
-                  this.state.elementType,
-                  width,
-                  !isLinear && y < originY ? -height : height,
-                ));
-
-                if (!isLinear && height < 0) height = -height;
-              }
-
-              if (!isLinear) {
-                draggingElement.x = x < originX ? originX - width : originX;
-                draggingElement.y = y < originY ? originY - height : originY;
-              }
-
-              draggingElement.width = width;
-              draggingElement.height = height;
-              draggingElement.shape = null;
-
-              if (this.state.elementType === "selection") {
-                if (!e.shiftKey) {
-                  elements = clearSelection(elements);
-                }
-                const elementsWithinSelection = getElementsWithinSelection(
+              const selectedElements = elements.filter(e => e.isSelected)
+                .length;
+              if (selectedElements === 1) {
+                const resizeElement = getElementWithResizeHandler(
                   elements,
-                  draggingElement,
+                  { x, y },
+                  this.state,
                 );
-                elementsWithinSelection.forEach(element => {
-                  element.isSelected = true;
-                });
-              }
-              // We don't want to save history when moving an element
-              history.skipRecording();
-              this.setState({});
-            };
-
-            const onMouseUp = (e: MouseEvent) => {
-              const {
-                draggingElement,
-                resizingElement,
-                elementType,
-                elementLocked,
-              } = this.state;
-
-              lastMouseUp = null;
-              window.removeEventListener("mousemove", onMouseMove);
-              window.removeEventListener("mouseup", onMouseUp);
-
-              if (
-                elementType !== "selection" &&
-                draggingElement &&
-                isInvisiblySmallElement(draggingElement)
-              ) {
-                // remove invisible element which was added in onMouseDown
-                elements = elements.slice(0, -1);
-                this.setState({
-                  draggingElement: null,
-                });
-                return;
-              }
-
-              if (normalizeDimensions(draggingElement)) {
-                this.setState({});
-              }
-
-              if (resizingElement && isInvisiblySmallElement(resizingElement)) {
-                elements = elements.filter(el => el.id !== resizingElement.id);
-              }
-
-              // If click occurred on already selected element
-              // it is needed to remove selection from other elements
-              // or if SHIFT or META key pressed remove selection
-              // from hitted element
-              //
-              // If click occurred and elements were dragged or some element
-              // was added to selection (on mousedown phase) we need to keep
-              // selection unchanged
-              if (
-                hitElement &&
-                !draggingOccurred &&
-                !elementIsAddedToSelection
-              ) {
-                if (e.shiftKey) {
-                  hitElement.isSelected = false;
-                } else {
-                  elements = clearSelection(elements);
-                  hitElement.isSelected = true;
-                }
-              }
-
-              if (draggingElement === null) {
-                // if no element is clicked, clear the selection and redraw
-                elements = clearSelection(elements);
-                this.setState({});
-                return;
-              }
-
-              if (elementType === "selection") {
-                elements = elements.slice(0, -1);
-              } else if (!elementLocked) {
-                draggingElement.isSelected = true;
-              }
-
-              if (!elementLocked) {
-                resetCursor();
-
-                this.setState({
-                  draggingElement: null,
-                  elementType: "selection",
-                });
-              }
-
-              history.resumeRecording();
-              this.setState({});
-            };
-
-            lastMouseUp = onMouseUp;
-
-            window.addEventListener("mousemove", onMouseMove);
-            window.addEventListener("mouseup", onMouseUp);
-
-            // We don't want to save history on mouseDown, only on mouseUp when it's fully configured
-            history.skipRecording();
-            this.setState({});
-          }}
-          onDoubleClick={e => {
-            const { x, y } = viewportCoordsToSceneCoords(e, this.state);
-
-            const elementAtPosition = getElementAtPosition(elements, x, y);
-
-            const element =
-              elementAtPosition && isTextElement(elementAtPosition)
-                ? elementAtPosition
-                : newTextElement(
-                    newElement(
-                      "text",
-                      x,
-                      y,
-                      this.state.currentItemStrokeColor,
-                      this.state.currentItemBackgroundColor,
-                      this.state.currentItemFillStyle,
-                      this.state.currentItemStrokeWidth,
-                      this.state.currentItemRoughness,
-                      this.state.currentItemOpacity,
-                    ),
-                    "", // default text
-                    this.state.currentItemFont, // default font
+                if (resizeElement && resizeElement.resizeHandle) {
+                  document.documentElement.style.cursor = getCursorForResizingElement(
+                    resizeElement,
                   );
-
-            this.setState({ editingElement: element });
-
-            let textX = e.clientX;
-            let textY = e.clientY;
-
-            if (elementAtPosition && isTextElement(elementAtPosition)) {
-              elements = elements.filter(
-                element => element.id !== elementAtPosition.id,
-              );
-              this.setState({});
-
-              textX =
-                this.state.scrollX +
-                elementAtPosition.x +
-                CANVAS_WINDOW_OFFSET_LEFT +
-                elementAtPosition.width / 2;
-              textY =
-                this.state.scrollY +
-                elementAtPosition.y +
-                CANVAS_WINDOW_OFFSET_TOP +
-                elementAtPosition.height / 2;
-
-              // x and y will change after calling newTextElement function
-              element.x = elementAtPosition.x + elementAtPosition.width / 2;
-              element.y = elementAtPosition.y + elementAtPosition.height / 2;
-            } else if (!e.altKey) {
-              const snappedToCenterPosition = this.getTextWysiwygSnappedToCenterPosition(
-                x,
-                y,
-              );
-
-              if (snappedToCenterPosition) {
-                element.x = snappedToCenterPosition.elementCenterX;
-                element.y = snappedToCenterPosition.elementCenterY;
-                textX = snappedToCenterPosition.wysiwygX;
-                textY = snappedToCenterPosition.wysiwygY;
-              }
-            }
-
-            const resetSelection = () => {
-              this.setState({
-                draggingElement: null,
-                editingElement: null,
-                elementType: "selection",
-              });
-            };
-
-            textWysiwyg({
-              initText: element.text,
-              x: textX,
-              y: textY,
-              strokeColor: element.strokeColor,
-              font: element.font,
-              opacity: this.state.currentItemOpacity,
-              onSubmit: text => {
-                if (text) {
-                  elements = [
-                    ...elements,
-                    {
-                      // we need to recreate the element to update dimensions &
-                      //  position
-                      ...newTextElement(element, text, element.font),
-                      isSelected: true,
-                    },
-                  ];
+                  return;
                 }
-                resetSelection();
-              },
-              onCancel: () => {
-                resetSelection();
-              },
-            });
-          }}
-          onMouseMove={e => {
-            const hasDeselectedButton = Boolean(e.buttons);
-            if (hasDeselectedButton || this.state.elementType !== "selection") {
-              return;
-            }
-            const { x, y } = viewportCoordsToSceneCoords(e, this.state);
-            const selectedElements = elements.filter(e => e.isSelected).length;
-            if (selectedElements === 1) {
-              const resizeElement = getElementWithResizeHandler(
-                elements,
-                { x, y },
-                this.state,
-              );
-              if (resizeElement && resizeElement.resizeHandle) {
-                document.documentElement.style.cursor = getCursorForResizingElement(
-                  resizeElement,
-                );
-                return;
               }
-            }
-            const hitElement = getElementAtPosition(elements, x, y);
-            document.documentElement.style.cursor = hitElement ? "move" : "";
-          }}
-        />
-        <LanguageList
-          onClick={lng => {
-            i18n.changeLanguage(lng);
-          }}
-          languages={languages}
-          currentLanguage={parseDetectedLang(i18n.language)}
-        />
+              const hitElement = getElementAtPosition(elements, x, y);
+              document.documentElement.style.cursor = hitElement ? "move" : "";
+            }}
+          >
+            {t("labels.drawingCanvas")}
+          </canvas>
+        </main>
+        <footer role="contentinfo">
+          <LanguageList
+            onClick={lng => {
+              i18n.changeLanguage(lng);
+            }}
+            languages={languages}
+            currentLanguage={parseDetectedLang(i18n.language)}
+          />
+        </footer>
       </div>
     );
   }