Merge pull request #33519 from iplabs/offscreencanvas

Add offscreencanvas types

types/offscreencanvas/index.d.ts

@@ -0,0 +1,53 @@
+// Type definitions for non-npm package offscreencanvas-browser 2019.3
+// Project: https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface
+// Definitions by: Klaus Reimer <https://github.com/kayahr>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+// TypeScript Version: 3.1
+
+// https://html.spec.whatwg.org/multipage/canvas.html#canvasdrawimage
+interface CanvasDrawImage {
+    drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number): void;
+    drawImage(image: CanvasImageSource | OffscreenCanvas, dx: number, dy: number, dw: number, dh: number): void;
+    drawImage(image: CanvasImageSource | OffscreenCanvas, sx: number, sy: number, sw: number, sh: number,
+        dx: number, dy: number, dw: number, dh: number): void;
+}
+
+// https://html.spec.whatwg.org/multipage/imagebitmap-and-animations.html#dom-createimagebitmap
+declare function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas): Promise<ImageBitmap>;
+declare function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas, sx: number, sy: number,
+    sw: number, sh: number): Promise<ImageBitmap>;
+
+// https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-transfercontroltooffscreen
+interface HTMLCanvasElement extends HTMLElement {
+    transferControlToOffscreen(): OffscreenCanvas;
+}
+
+// https://html.spec.whatwg.org/multipage/canvas.html#offscreencanvasrenderingcontext2d
+interface OffscreenCanvasRenderingContext2D extends CanvasState, CanvasTransform, CanvasCompositing,
+        CanvasImageSmoothing, CanvasFillStrokeStyles, CanvasShadowStyles, CanvasFilters, CanvasRect,
+        CanvasDrawPath, CanvasText, CanvasDrawImage, CanvasImageData, CanvasPathDrawingStyles,
+        CanvasTextDrawingStyles, CanvasPath {
+    readonly canvas: OffscreenCanvas;
+}
+declare var OffscreenCanvasRenderingContext2D: {
+    prototype: OffscreenCanvasRenderingContext2D;
+    new (): OffscreenCanvasRenderingContext2D;
+};
+
+// https://html.spec.whatwg.org/multipage/canvas.html#the-offscreencanvas-interface
+interface OffscreenCanvas extends EventTarget {
+    width: number;
+    height: number;
+    getContext(contextId: "2d", contextAttributes?: CanvasRenderingContext2DSettings):
+        OffscreenCanvasRenderingContext2D | null;
+    getContext(contextId: "webgl", contextAttributes?: WebGLContextAttributes): WebGLRenderingContext | null;
+    getContext(contextId: string, contextAttributes?: {}): OffscreenCanvasRenderingContext2D
+        | WebGLRenderingContext | null;
+    transferToImageBitmap(): ImageBitmap;
+    convertToBlob(options?: { type?: string, quality?: number }): Promise<Blob>;
+}
+declare var OffscreenCanvas: {
+    prototype: OffscreenCanvas;
+    new (width: number, height: number): OffscreenCanvas;
+};

types/offscreencanvas/offscreencanvas-tests.ts

@@ -0,0 +1,33 @@
+// Test constructor
+const offscreenCanvas: OffscreenCanvas = new OffscreenCanvas(20, 10);
+
+// Test OffscreenCanvas properties
+let width: number = offscreenCanvas.width;
+let height: number = offscreenCanvas.height;
+
+// Test OffscreenCanvas methods
+const context2D: OffscreenCanvasRenderingContext2D | null = offscreenCanvas.getContext("2d");
+const webglContext: WebGLRenderingContext | null = offscreenCanvas.getContext("webgl");
+const otherContext: OffscreenCanvasRenderingContext2D | WebGLRenderingContext | null =
+    offscreenCanvas.getContext("foobar");
+const imageBitmap: ImageBitmap = offscreenCanvas.transferToImageBitmap();
+const blob1: Promise<Blob> = offscreenCanvas.convertToBlob();
+const blob2: Promise<Blob> = offscreenCanvas.convertToBlob({ type: "image/jpeg" });
+const blob3: Promise<Blob> = offscreenCanvas.convertToBlob({ type: "image/jpeg", quality: 0.92 });
+
+// Test OffscreenCanvasRenderingContext2D properties
+const canvasRef: OffscreenCanvas = context2D!.canvas;
+
+// Test HTMLCanvasElement methods
+const canvas: HTMLCanvasElement = document.createElement("canvas");
+const transferredCanvas: OffscreenCanvas = canvas.transferControlToOffscreen();
+
+// Test CanvasRenderingContext2D methods
+const ctx = canvas.getContext("2d")!;
+ctx.drawImage(offscreenCanvas, 0, 0);
+ctx.drawImage(offscreenCanvas, 0, 0, 20, 10);
+ctx.drawImage(offscreenCanvas, 0, 0, 20, 10, 0, 0, 20, 10);
+
+// Test createImageBitmap function with offscreen canvas
+const imageBitmap1 = createImageBitmap(offscreenCanvas);
+const imageBitmap2 = createImageBitmap(offscreenCanvas, 1, 2, 3, 4);

types/offscreencanvas/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6",
+            "dom"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "offscreencanvas-tests.ts"
+    ]
+}

types/offscreencanvas/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }