feat: added color space option to Project and Player (#89)

On some browsers, notably Chrome after 94, the Canvas rendering context
may be created using the display-p3 color space. This change introduces
the option to switch to this color space, though it is yet to be tested.

Closes #80

src/Project.ts

@@ -1,7 +1,7 @@
 import {Scene, SceneDescription} from './scenes';
 import {Meta, Metadata} from './Meta';
 import {ValueDispatcher} from './events';
-import {Size} from './types';
+import {Size, CanvasColorSpace} from './types';
 
 export const ProjectSize = {
   FullHD: {width: 1920, height: 1080},
@@ -51,6 +51,11 @@ export class Project {
     this.updateCanvas();
   }
 
+  public set colorSpace(value: CanvasColorSpace) {
+    this._colorSpace = value;
+    this.updateCanvas();
+  }
+
   public set speed(value: number) {
     this._speed = value;
     this.reloadAll();
@@ -58,6 +63,9 @@ export class Project {
 
   private updateCanvas() {
     if (this.canvas) {
+      this.context = this.canvas.getContext('2d', {
+        colorSpace: this._colorSpace,
+      });
       this.canvas.width = this.width * this._resolutionScale;
       this.canvas.height = this.height * this._resolutionScale;
       this.render();
@@ -66,7 +74,6 @@ export class Project {
 
   public setCanvas(value: HTMLCanvasElement) {
     this.canvas = value;
-    this.context = value?.getContext('2d');
     this.updateCanvas();
   }
 
@@ -92,6 +99,7 @@ export class Project {
 
   public readonly name: string;
   private _resolutionScale = 1;
+  private _colorSpace: CanvasColorSpace = 'srgb';
   private _speed = 1;
   private framesPerSeconds = 30;
   private readonly sceneLookup: Record<string, Scene> = {};

src/player/Player.ts

@@ -5,6 +5,7 @@ import {
   EventDispatcher,
   ValueDispatcher,
 } from '../events';
+import type {CanvasColorSpace} from '../types';
 
 const MAX_AUDIO_DESYNC = 1 / 50;
 
@@ -21,6 +22,7 @@ export interface PlayerState extends Record<string, unknown> {
   muted: boolean;
   fps: number;
   scale: number;
+  colorSpace: CanvasColorSpace;
 }
 
 interface PlayerCommands {
@@ -50,6 +52,7 @@ export class Player {
     muted: true,
     fps: 30,
     scale: 1,
+    colorSpace: 'srgb',
   });
 
   public get onFrameChanged() {
@@ -83,6 +86,7 @@ export class Player {
     this.startTime = performance.now();
     this.project.framerate = this.state.current.fps;
     this.project.resolutionScale = this.state.current.scale;
+    this.project.colorSpace = this.state.current.colorSpace;
 
     this.request();
   }
@@ -92,6 +96,7 @@ export class Player {
     this.project.speed = state.speed;
     this.project.framerate = state.fps;
     this.project.resolutionScale = state.scale;
+    this.project.colorSpace = state.colorSpace;
     this.setRange(state.startFrame, state.endFrame);
   }
 
@@ -179,6 +184,12 @@ export class Player {
     this.project.render();
   }
 
+  public setColorSpace(colorSpace: CanvasColorSpace) {
+    this.project.colorSpace = colorSpace;
+    this.updateState({colorSpace});
+    this.project.render();
+  }
+
   public requestPreviousFrame(): void {
     this.commands.seek = this.frame.current - this.state.current.speed;
   }

src/types/Canvas.ts

@@ -0,0 +1 @@
+export type CanvasColorSpace = 'srgb' | 'display-p3';

src/types/index.ts

@@ -1,3 +1,4 @@
+export * from './Canvas';
 export * from './Origin';
 export * from './Rect';
 export * from './Size';