diff --git a/Animation.js b/Animation.js
index 59b2db74e..b2684f834 100644
--- a/Animation.js
+++ b/Animation.js
@@ -138,154 +138,7 @@ function newAnimation () {
 
       /* Media Recording */
       if (areWeRecording === true) {
-        const DISTANCE_BETWEEN_ICONS = 60
-        const ICON_SIZES = 50
-
-        let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
-        let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
-        let draggingIcon = canvas.designSpace.iconCollection.get('support')
-        let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
-
-        let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
-        let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
-        let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
-
-        let imagePosition
-        let buttonPressedIcon
-
-        switch (canvas.mouse.action) {
-          case 'moving': {
-            pointerIcon = mousePointerIcon
-            break
-          }
-          case 'dragging': {
-            pointerIcon = draggingIcon
-            break
-          }
-          case 'wheel': {
-            pointerIcon = wheelIcon
-            break
-          }
-          case 'key down': {
-            pointerIcon = mousePointerIcon
-            break
-          }
-          case 'key up': {
-            pointerIcon = mousePointerIcon
-            break
-          }
-        }
-
-        imagePosition = {
-          x: canvas.mouse.position.x,
-          y: canvas.mouse.position.y
-        }
-        drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
-
-        switch (canvas.mouse.event.buttons) {
-          case 0: {
-            buttonPressedIcon = undefined
-            break
-          }
-          case 1: {
-            buttonPressedIcon = leftClickIcon
-            break
-          }
-          case 2: {
-            buttonPressedIcon = rightClickIcon
-            break
-          }
-          case 3: {
-            buttonPressedIcon = undefined
-            break
-          }
-          case 4: {
-            buttonPressedIcon = wheelClickIcon
-            break
-          }
-        }
-
-        imagePosition = {
-          x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
-          y: canvas.mouse.position.y
-        }
-        drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
-
-        if (canvas.mouse.event.shiftKey === true) {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.altKey === true) {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y - 0
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowUp') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - 0,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowDown') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - 0,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowLeft') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        if (canvas.mouse.event.code === 'ArrowRight') {
-          let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
-          imagePosition = {
-            x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
-            y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
-          }
-          drawMousePointer(icon, imagePosition, ICON_SIZES)
-        }
-
-        function drawMousePointer (icon, imagePosition, imageSize) {
-          if (icon !== undefined) {
-            if (icon.canDrawIcon === true) {
-              browserCanvasContext.drawImage(
-                icon, imagePosition.x,
-                imagePosition.y,
-                imageSize,
-                imageSize)
-            }
-          }
-        }
-        mediaRecorder.capture(browserCanvas)
+        recordCanvas()
       }
 
       /* We request the next frame to be drawn, and stablishing a loop */
diff --git a/Recording.js b/Recording.js
new file mode 100644
index 000000000..613f664c9
--- /dev/null
+++ b/Recording.js
@@ -0,0 +1,152 @@
+function recordCanvas () {
+  {
+    const DISTANCE_BETWEEN_ICONS = 60
+    const ICON_SIZES = 50
+
+    let mousePointerIcon = canvas.designSpace.iconCollection.get('mouse-pointer')
+    let wheelIcon = canvas.designSpace.iconCollection.get('mouse-wheel')
+    let draggingIcon = canvas.designSpace.iconCollection.get('support')
+    let keyDownIcon = canvas.designSpace.iconCollection.get('tron')
+
+    let leftClickIcon = canvas.designSpace.iconCollection.get('mouse-left-click')
+    let rightClickIcon = canvas.designSpace.iconCollection.get('mouse-right-click')
+    let wheelClickIcon = canvas.designSpace.iconCollection.get('mouse-wheel-click')
+
+    let imagePosition
+    let buttonPressedIcon
+
+    switch (canvas.mouse.action) {
+      case 'moving': {
+        pointerIcon = mousePointerIcon
+        break
+      }
+      case 'dragging': {
+        pointerIcon = draggingIcon
+        break
+      }
+      case 'wheel': {
+        pointerIcon = wheelIcon
+        break
+      }
+      case 'key down': {
+        pointerIcon = mousePointerIcon
+        break
+      }
+      case 'key up': {
+        pointerIcon = mousePointerIcon
+        break
+      }
+    }
+
+    imagePosition = {
+      x: canvas.mouse.position.x,
+      y: canvas.mouse.position.y
+    }
+    drawMousePointer(pointerIcon, imagePosition, ICON_SIZES)
+
+    switch (canvas.mouse.event.buttons) {
+      case 0: {
+        buttonPressedIcon = undefined
+        break
+      }
+      case 1: {
+        buttonPressedIcon = leftClickIcon
+        break
+      }
+      case 2: {
+        buttonPressedIcon = rightClickIcon
+        break
+      }
+      case 3: {
+        buttonPressedIcon = undefined
+        break
+      }
+      case 4: {
+        buttonPressedIcon = wheelClickIcon
+        break
+      }
+    }
+
+    imagePosition = {
+      x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+      y: canvas.mouse.position.y
+    }
+    drawMousePointer(buttonPressedIcon, imagePosition, ICON_SIZES)
+
+    if (canvas.mouse.event.shiftKey === true) {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y - DISTANCE_BETWEEN_ICONS
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.ctrlKey === true || canvas.mouse.event.metaKey === true) {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.altKey === true) {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y - 0
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowUp') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - 0,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowDown') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - 0,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowLeft') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x - DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    if (canvas.mouse.event.code === 'ArrowRight') {
+      let icon = canvas.designSpace.iconCollection.get('mouse-wheel')
+      imagePosition = {
+        x: canvas.mouse.position.x + DISTANCE_BETWEEN_ICONS,
+        y: canvas.mouse.position.y + DISTANCE_BETWEEN_ICONS * 2
+      }
+      drawMousePointer(icon, imagePosition, ICON_SIZES)
+    }
+
+    function drawMousePointer (icon, imagePosition, imageSize) {
+      if (icon !== undefined) {
+        if (icon.canDrawIcon === true) {
+          browserCanvasContext.drawImage(
+            icon, imagePosition.x,
+            imagePosition.y,
+            imageSize,
+            imageSize)
+        }
+      }
+    }
+    mediaRecorder.capture(browserCanvas)
+  }
+}