Add skia-canvas (#47306)

* Add skia-canvas

* Add link to my profile

types/skia-canvas/index.d.ts

@@ -0,0 +1,83 @@
+// Type definitions for skia-canvas 0.9
+// Project: https://github.com/samizdatco/skia-canvas#readme
+// Definitions by: Carlos Precioso <https://github.com/cprecioso>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// Minimum TypeScript Version: 3.6
+
+/// <reference types="node" />
+
+export class Canvas {
+    constructor(width: number, height: number);
+    get width(): number;
+    get height(): number;
+
+    getContext(type: '2d'): CanvasRenderingContext2D;
+
+    get pages(): ReadonlyArray<CanvasRenderingContext2D>;
+
+    get pdf(): Buffer;
+    get svg(): Buffer;
+    get jpg(): Buffer;
+    get png(): Buffer;
+
+    newPage(width: number, height: number): CanvasRenderingContext2D;
+
+    saveAs(filename: string, options?: { format?: string; quality?: number }): void;
+    toBuffer(format: string, options?: { quality?: number; page?: number }): Buffer;
+    toDataURL(format: string, options?: { quality?: number; page?: number }): string;
+}
+
+export class CanvasRenderingContext2D extends globalThis.CanvasRenderingContext2D {
+    fontVariant: string;
+    textTracking: number;
+    textWrap: boolean;
+    measureText(text: string): TextMetrics;
+}
+
+export interface TextMetrics extends globalThis.TextMetrics {
+    lines: TextMetricsLine[];
+}
+
+export interface TextMetricsLine {
+    x: number;
+    y: number;
+    height: number;
+    baseline: number;
+    startIndex: number;
+    endIndex: number;
+}
+
+export class CanvasGradient extends globalThis.CanvasGradient {}
+export class CanvasPattern extends globalThis.CanvasPattern {}
+export class DOMMatrix extends globalThis.DOMMatrix {}
+export class Image extends globalThis.Image {}
+export class ImageData extends globalThis.ImageData {}
+export class Path2D extends globalThis.Path2D {}
+
+export function loadImage(src: string | Buffer): Promise<Image>;
+
+export interface FontFamily {
+    family: string;
+    weights: number[];
+    widths: string[];
+    styles: string[];
+}
+
+export interface FontVariant {
+    family: string;
+    weight: number;
+    style: string;
+    width: string;
+    file: string;
+}
+
+export interface FontLibrary {
+    families: string[];
+    family(name: string): FontFamily | undefined;
+    has(familyName: string): boolean;
+    use(familyName: string, fontPaths: ReadonlyArray<string>): FontVariant[];
+    use(fontPaths: ReadonlyArray<string>): FontVariant[];
+    use(families: Record<string, ReadonlyArray<string> | string>): Record<string, FontVariant[] | FontVariant>;
+}
+
+export const FontLibrary: FontLibrary;

types/skia-canvas/skia-canvas-tests.ts

@@ -0,0 +1,38 @@
+import skiaCanvas = require('skia-canvas');
+import fs = require('fs');
+
+const { Canvas } = skiaCanvas;
+const rand = (n: number) => Math.floor(n * Math.random());
+
+const canvas = new Canvas(600, 600);
+const ctx = canvas.getContext('2d');
+const { width, height } = canvas;
+
+// draw a sea of blurred dots filling the canvas
+ctx.filter = 'blur(12px) hue-rotate(20deg)';
+for (let i = 0; i < 800; i++) {
+    ctx.fillStyle = `hsl(${rand(40)}deg, 80%, 50%)`;
+    ctx.beginPath();
+    ctx.arc(rand(width), rand(height), rand(20) + 5, 0, 2 * Math.PI);
+    ctx.fill();
+}
+
+// mask all of the dots that don't overlap with the text
+ctx.filter = 'none';
+ctx.globalCompositeOperation = 'destination-in';
+ctx.font = 'italic 480px Times, DejaVu Serif';
+ctx.textAlign = 'center';
+ctx.textBaseline = 'top';
+ctx.fillText('¶', width / 2, 0);
+
+// draw a background behind the clipped text
+ctx.globalCompositeOperation = 'destination-over';
+ctx.fillStyle = '#182927';
+ctx.fillRect(0, 0, width, height);
+
+// save the graphic...
+canvas.saveAs('pilcrow.png');
+// ...or use a shorthand for canvas.toBuffer("png")
+fs.writeFileSync('pilcrow.png', canvas.png);
+// ...or embed it in a string
+console.log(`<img src="${canvas.toDataURL('png')}">`);

types/skia-canvas/tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es5",
+        "lib": ["es6", "DOM"],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictFunctionTypes": true,
+        "strictNullChecks": true,
+        "baseUrl": "../",
+        "typeRoots": ["../"],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": ["index.d.ts", "skia-canvas-tests.ts"]
+}

types/skia-canvas/tslint.json

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