diff --git a/types/offscreencanvas/index.d.ts b/types/offscreencanvas/index.d.ts new file mode 100644 index 0000000000..89e2b14df6 --- /dev/null +++ b/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 +// 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; +declare function createImageBitmap(image: ImageBitmapSource | OffscreenCanvas, sx: number, sy: number, + sw: number, sh: number): Promise; + +// 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; +} +declare var OffscreenCanvas: { + prototype: OffscreenCanvas; + new (width: number, height: number): OffscreenCanvas; +}; diff --git a/types/offscreencanvas/offscreencanvas-tests.ts b/types/offscreencanvas/offscreencanvas-tests.ts new file mode 100644 index 0000000000..9f89e374b3 --- /dev/null +++ b/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 = offscreenCanvas.convertToBlob(); +const blob2: Promise = offscreenCanvas.convertToBlob({ type: "image/jpeg" }); +const blob3: Promise = 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); diff --git a/types/offscreencanvas/tsconfig.json b/types/offscreencanvas/tsconfig.json new file mode 100644 index 0000000000..12d786084f --- /dev/null +++ b/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" + ] +} diff --git a/types/offscreencanvas/tslint.json b/types/offscreencanvas/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/offscreencanvas/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" }