constructor ({
    canvas,
    canvasDiv,
    cinematicData,
    handlers: {
      onPlay,
      onPause,
      onCompletion,
      onLoaded
    },
    userOptions: {
      programmingLanguage
    } = {}
  }) {
    this.onPlay = onPlay || (() => {})
    this.onPause = onPause || (() => {})
    this.onCompletion = onCompletion || (() => {})
    this.onLoaded = onLoaded || (() => {})

    this.userOptions = {
      programmingLanguage: programmingLanguage || 'python'
    }

    this.systems = {}

    this.stage = new createjs.StageGL(canvas)
    const camera = new Camera($(canvas))
    // stubRequiredLayer needed by Lanks as a dependency. We don't attach to canvas.
    this.stubRequiredLayer = new LayerAdapter({ name: 'Ground', webGL: true, camera })

    this.layerAdapter = new LayerAdapter({ name: 'Default', webGL: true, camera })
    this.backgroundObjectAdapter = new LayerAdapter({ name: 'Background Object', webGL: true, camera })
    this.backgroundAdapter = new LayerAdapter({ name: 'Background', webGL: true, camera })
    this.layerAdapter.resolutionFactor = CINEMATIC_SPRITE_RESOLUTION_FACTOR
    this.backgroundAdapter.resolutionFactor = CINEMATIC_SPRITE_RESOLUTION_FACTOR
    this.backgroundObjectAdapter.resolutionFactor = CINEMATIC_BACKGROUND_OBJECT_RESOLUTION_FACTOR
    this.stage.addChild(this.backgroundAdapter.container)
    this.stage.addChild(this.backgroundObjectAdapter.container)
    this.stage.addChild(this.layerAdapter.container)

    this.systems.cameraSystem = new CameraSystem(camera)
    this.systems.loader = new Loader({ data: cinematicData })
    this.systems.fadeSystem = new FadeSystem()
    this.systems.sound = new SoundSystem()
    this.systems.autoplay = new Autoplay()
    this.systems.visualChalkboard = new VisualChalkboard()

    this.systems.dialogSystem = new DialogSystem({
      canvasDiv,
      camera
    })

    this.systems.dialogSystem.templateContext = {
      name: (me.get('ozariaUserOptions') || {}).playerHeroName || me.get('name') || 'hero'
    }

    this.systems.cinematicLankBoss = new CinematicLankBoss({
      groundLayer: this.stubRequiredLayer,
      layerAdapter: this.layerAdapter,
      backgroundAdapter: this.backgroundAdapter,
      backgroundObjectAdapter: this.backgroundObjectAdapter,
      camera,
      loader: this.systems.loader
    })

    // This is a singleton. Used so commands can hook into the undo system
    // via dependency injection. Because this is a singleton we need to clear it
    // at the start of every cinematic or the commands will persist between
    // cinematics.
    this.undoCommands = UndoSystem
    this.undoCommands.reset()

    this.commands = []
    this.mode = FORWARD_MODE
    this.wasCancelled = false

    // Explicitly setting class as non reactive for performance benefit.
    Vue.nonreactive(this)

    this.startUp()
  }
Takes a reference of the canvas and uses this to set up all the systems.
The canvasDiv will be used by the dialogSystem in order to attach the html dialog div
and svg image overlaying the base canvas.
Finally the slug is used to load the relevant cinematic data.