Superalgos/Recording.js

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)
  }
}