Clarify canvas ctx.globalCompositeOperation type

[Joncom]

TypeScript Version: 3.6.4

Search Terms:

globalCompositeOperation, TypeScript, union

Code:

The valid strings for ctx.globalCompositeOperation can be viewed here: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

For example, this is valid:

ctx.globalCompositeOperation = 'source-in';

However, this is invalid:

ctx.globalCompositeOperation = 'foo';

And yet TypeScript thinks both are valid, because TypeScript simply defines globalCompositeOperation as string:

TypeScript/lib/lib.dom.d.ts

Lines 3376 to 3379 in 29becf0

	interface CanvasCompositing {
	globalAlpha: number;
	globalCompositeOperation: string;
	}

The following union would provide a better development experience:

 'source-over' | 'source-in' | 'source-out' | 'source-atop' | 'destination-over' | 'destination-in' | 'destination-out' | 'destination-atop' | 'lighter' | 'copy' | 'xor' | 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten' | 'color-dodge' | 'color-burn' | 'hard-light' | 'soft-light' | 'difference' | 'exclusion' | 'hue' | 'saturation' | 'color' | 'luminosity'

[dhaig]

I opened a PR with these typings over in the DOM-lib-generator repo: microsoft/TypeScript-DOM-lib-generator#1206

[jakebailey]

The above was pull into main in #47445.