1// This file is type-checked by the Typescript definitions. It is not actually executed. 2// Test it by running `npm run dtslint` in the parent directory. 3import CanvasKitInit, { 4 AnimatedImage, 5 Canvas, 6 CanvasKit, 7 ColorFilter, 8 Font, 9 FontMgr, 10 Image, 11 ImageFilter, 12 ImageInfo, InputBidiRegions, 13 MaskFilter, 14 Paint, 15 Paragraph, 16 Path, 17 PathEffect, 18 Shader, 19 SkPicture, 20 TextBlob, 21 Typeface, 22 Vertices, 23 WebGPUDeviceContext, 24} from "canvaskit-wasm"; 25 26CanvasKitInit({locateFile: (file: string) => '/node_modules/canvaskit/bin/' + file}).then((CK: CanvasKit) => { 27 animatedImageTests(CK); 28 canvasTests(CK); 29 canvas2DTests(CK); 30 colorFilterTests(CK); 31 colorTests(CK); 32 contourMeasureTests(CK); 33 imageFilterTests(CK); 34 imageTests(CK); 35 fontTests(CK); 36 fontMgrTests(CK); 37 globalTests(CK); 38 mallocTests(CK); 39 maskFilterTests(CK); 40 matrixTests(CK); 41 paintTests(CK); 42 paragraphTests(CK); 43 paragraphBuilderTests(CK); 44 pathEffectTests(CK); 45 pathTests(CK); 46 pictureTests(CK); 47 rectangleTests(CK); 48 runtimeEffectTests(CK); 49 skottieTests(CK); 50 shaderTests(CK); 51 surfaceTests(CK); 52 textBlobTests(CK); 53 typefaceTests(CK); 54 vectorTests(CK); 55 verticesTests(CK); 56 webGPUTest(CK); 57}); 58 59function animatedImageTests(CK: CanvasKit) { 60 const buff = new ArrayBuffer(10); 61 const img = CK.MakeAnimatedImageFromEncoded(buff); // $ExpectType AnimatedImage | null 62 if (!img) return; 63 const n = img.decodeNextFrame(); // $ExpectType number 64 const f = img.getFrameCount(); // $ExpectType number 65 const r = img.getRepetitionCount(); // $ExpectType number 66 const h = img.height(); // $ExpectType number 67 const still = img.makeImageAtCurrentFrame(); // $ExpectType Image | null 68 const ms = img.currentFrameDuration(); // $ExpectType number 69 img.reset(); 70 const w = img.width(); // $ExpectType number 71} 72 73// In an effort to keep these type-checking tests easy to read and understand, we can "inject" 74// types instead of actually having to create them from scratch. To inject them, we define them 75// as an optional parameter and then have a null check to make sure that optional-ness does not 76// cause errors. 77function canvasTests(CK: CanvasKit, canvas?: Canvas, paint?: Paint, path?: Path, 78 img?: Image, aImg?: AnimatedImage, para?: Paragraph, 79 skp?: SkPicture, font?: Font, textBlob?: TextBlob, verts?: Vertices, 80 imageInfo?: ImageInfo, imgFilter?: ImageFilter) { 81 if (!canvas || !paint || !path || !img || !aImg || !para || !skp || !font || 82 !textBlob || !verts || !imageInfo || !imgFilter) { 83 return; 84 } 85 const someColor = [0.9, 0.8, 0.7, 0.6]; // Making sure arrays are accepted as colors. 86 const someRect = [4, 3, 2, 1]; // Making sure arrays are accepted as rects. 87 // Making sure arrays are accepted as rrects. 88 const someRRect = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 89 const someMatrix = CK.Malloc(Float32Array, 16); // Make sure matrixes can be malloc'd. 90 91 canvas.clear(CK.RED); 92 canvas.clipPath(path, CK.ClipOp.Intersect, false); 93 canvas.clipRect(someRect, CK.ClipOp.Intersect, true); 94 canvas.clipRRect(CK.RRectXY(someRect, 10, 20), CK.ClipOp.Difference, true); 95 canvas.concat([1, 0, 0, 0, 1, 0, 0, 0, 1]); 96 canvas.concat(someMatrix); 97 canvas.drawArc(someRect, 0, 90, true, paint); 98 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint); 99 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint, 100 CK.BlendMode.Darken, 101 [CK.ColorAsInt(100, 110, 120), CK.ColorAsInt(130, 140, 150)]); 102 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint, 103 null, null, {B: 0, C: 0.5}); 104 canvas.drawAtlas(img, [1, 2, 3, 4, 5, 6, 7, 8], [8, 7, 6, 5, 4, 3, 2, 1], paint, 105 null, null, {filter: CK.FilterMode.Linear, mipmap: CK.MipmapMode.Nearest}); 106 canvas.drawCircle(20, 20, 20, paint); 107 canvas.drawColor(someColor); 108 canvas.drawColor(someColor, CK.BlendMode.ColorDodge); 109 canvas.drawColorComponents(0.2, 1.0, -0.02, 0.5); 110 canvas.drawColorComponents(0.2, 1.0, -0.02, 0.5, CK.BlendMode.ColorDodge); 111 canvas.drawColorInt(CK.ColorAsInt(100, 110, 120)); 112 canvas.drawColorInt(CK.ColorAsInt(100, 110, 120), CK.BlendMode.ColorDodge); 113 canvas.drawDRRect(someRRect, CK.RRectXY(someRect, 10, 20), paint); 114 canvas.drawImage(img, 0, -43); 115 canvas.drawImage(img, 0, -43, paint); 116 canvas.drawImageCubic(img, 0, -43, 1 / 3, 1 / 4, null); 117 canvas.drawImageOptions(img, 0, -43, CK.FilterMode.Nearest, CK.MipmapMode.Nearest, paint); 118 canvas.drawImageNine(img, someRect, someRect, CK.FilterMode.Nearest); 119 canvas.drawImageNine(img, CK.XYWHiRect(10, 20, 40, 40), someRect, CK.FilterMode.Linear, paint); 120 canvas.drawImageRect(img, someRect, someRect, paint); 121 canvas.drawImageRect(img, CK.XYWHRect(90, 90, 40, 40), someRect, paint); 122 canvas.drawImageRect(img, someRect, someRect, paint, true); 123 canvas.drawImageRectCubic(img, someRect, someRect, 1 / 5, 1 / 6); 124 canvas.drawImageRectCubic(img, someRect, someRect, 1 / 5, 1 / 6, paint); 125 canvas.drawImageRectOptions(img, someRect, someRect, CK.FilterMode.Linear, CK.MipmapMode.None); 126 canvas.drawImageRectOptions(img, someRect, someRect, CK.FilterMode.Linear, CK.MipmapMode.None, paint); 127 canvas.drawLine(1, 2, 3, 4, paint); 128 canvas.drawOval(someRect, paint); 129 canvas.drawPaint(paint); 130 canvas.drawParagraph(para, 10, 7); 131 const cubics = [1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 132 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12]; 133 const colors = [CK.RED, CK.BLUE, CK.GREEN, CK.WHITE]; 134 const texs = [1, 1, 2, 2, 3, 3, 4, 4]; 135 canvas.drawPatch(cubics, null, null, null, paint); 136 canvas.drawPatch(cubics, colors, null, CK.BlendMode.Clear, paint); 137 canvas.drawPatch(cubics, null, texs, null, paint); 138 canvas.drawPatch(cubics, colors, texs, CK.BlendMode.SrcOver, paint); 139 canvas.drawPath(path, paint); 140 canvas.drawPicture(skp); 141 canvas.drawPoints(CK.PointMode.Lines, [1, 2, 3, 4, 5, 6], paint); 142 canvas.drawRect(someRect, paint); 143 canvas.drawRect4f(5, 6, 7, 8, paint); 144 canvas.drawRRect(someRRect, paint); 145 canvas.drawShadow(path, [1, 2, 3], [4, 5, 6], 7, someColor, CK.BLUE, 0); 146 const mallocedVector3 = CK.Malloc(Float32Array, 3); 147 canvas.drawShadow(path, mallocedVector3, mallocedVector3, 7, someColor, CK.BLUE, 0); 148 canvas.drawText('foo', 1, 2, paint, font); 149 canvas.drawTextBlob(textBlob, 10, 20, paint); 150 canvas.drawVertices(verts, CK.BlendMode.DstOut, paint); 151 const irect = canvas.getDeviceClipBounds(); // $ExpectType Int32Array 152 const irect2 = canvas.getDeviceClipBounds(irect); // $ExpectType Int32Array 153 const matrTwo = canvas.getLocalToDevice(); // $ExpectType Float32Array 154 const sc = canvas.getSaveCount(); // $ExpectType number 155 const matrThree = canvas.getTotalMatrix(); // $ExpectType number[] 156 const surface = canvas.makeSurface(imageInfo); // $ExpectType Surface | null 157 const pixels = canvas.readPixels(85, 1000, {// $Uint8Array | Float32Array | null 158 width: 79, 159 height: 205, 160 colorType: CK.ColorType.RGBA_8888, 161 alphaType: CK.AlphaType.Unpremul, 162 colorSpace: CK.ColorSpace.SRGB, 163 }); 164 const m = CK.Malloc(Uint8Array, 10); 165 img.readPixels(85, 1000, { 166 width: 79, 167 height: 205, 168 colorType: CK.ColorType.RGBA_8888, 169 alphaType: CK.AlphaType.Unpremul, 170 colorSpace: CK.ColorSpace.SRGB, 171 }, m, 4 * 85); 172 canvas.restore(); 173 canvas.restoreToCount(2); 174 canvas.rotate(1, 2, 3); 175 const height = canvas.save(); // $ExpectType number 176 const h2 = canvas.saveLayer(); // $ExpectType number 177 const h3 = canvas.saveLayer(paint); // $ExpectType number 178 const h4 = canvas.saveLayer(paint, someRect); 179 const h5 = canvas.saveLayer(paint, someRect, imgFilter, CK.SaveLayerF16ColorType); 180 const h6 = canvas.saveLayer(paint, someRect, null, CK.SaveLayerInitWithPrevious); 181 canvas.scale(5, 10); 182 canvas.skew(10, 5); 183 canvas.translate(20, 30); 184 const ok = canvas.writePixels([1, 2, 3, 4], 1, 1, 10, 20); // $ExpectType boolean 185 const ok2 = canvas.writePixels([1, 2, 3, 4], 1, 1, 10, 20, CK.AlphaType.Premul, 186 CK.ColorType.Alpha_8, CK.ColorSpace.DISPLAY_P3); 187} 188 189function canvas2DTests(CK: CanvasKit) { 190 const bytes = new ArrayBuffer(10); 191 192 const canvas = CK.MakeCanvas(100, 200); 193 const img = canvas.decodeImage(bytes); 194 const ctx = canvas.getContext('2d'); 195 ctx!.lineTo(2, 4); 196 canvas.loadFont(bytes, { 197 family: 'BungeeNonSystem', 198 style: 'normal', 199 weight: '400', 200 }); 201 const p2d = canvas.makePath2D(); 202 p2d.quadraticCurveTo(1, 2, 3, 4); 203 const iData = new CK.ImageData(40, 50); 204 const imgStr = canvas.toDataURL(); 205} 206 207function colorTests(CK: CanvasKit) { 208 const colorOne = CK.Color(200, 200, 200, 0.8); // $ExpectType Float32Array 209 const colorTwo = CK.Color4f(0.8, 0.8, 0.8, 0.7); // $ExpectType Float32Array 210 const colorThree = CK.ColorAsInt(240, 230, 220); // $ExpectType number 211 const colorFour = CK.parseColorString('#887766'); // $ExpectType Float32Array 212 const colors = CK.computeTonalColors({ // $ExpectType TonalColorsOutput 213 ambient: colorOne, 214 spot: [0.2, 0.4, 0.6, 0.8], 215 }); 216 217 // Deprecated Color functions 218 const [r, g, b, a] = CK.getColorComponents(colorTwo); 219 const alphaChanged = CK.multiplyByAlpha(colorOne, 0.1); 220} 221 222function colorFilterTests(CK: CanvasKit) { 223 const cf = CK.ColorFilter; // less typing 224 const filterOne = cf.MakeBlend(CK.CYAN, CK.BlendMode.ColorBurn); // $ExpectType ColorFilter 225 const filterTwo = cf.MakeLinearToSRGBGamma(); // $ExpectType ColorFilter 226 const filterThree = cf.MakeSRGBToLinearGamma(); // $ExpectType ColorFilter 227 const filterFour = cf.MakeCompose(filterOne, filterTwo); // $ExpectType ColorFilter 228 const filterFive = cf.MakeLerp(0.7, filterThree, filterFour); // $ExpectType ColorFilter 229 const filterSeven = cf.MakeBlend(CK.MAGENTA, CK.BlendMode.SrcOut, CK.ColorSpace.DISPLAY_P3); // $ExpectType ColorFilter 230 231 const r = CK.ColorMatrix.rotated(0, .707, -.707); // $ExpectType Float32Array 232 const b = CK.ColorMatrix.rotated(2, .5, .866); 233 const s = CK.ColorMatrix.scaled(0.9, 1.5, 0.8, 0.8); 234 let cm = CK.ColorMatrix.concat(r, s); 235 cm = CK.ColorMatrix.concat(cm, b); 236 CK.ColorMatrix.postTranslate(cm, 20, 0, -10, 0); 237 238 const filterSix = CK.ColorFilter.MakeMatrix(cm); // $ExpectType ColorFilter 239 const luma = CK.ColorFilter.MakeLuma(); // $ExpectType ColorFilter 240} 241 242function contourMeasureTests(CK: CanvasKit, path?: Path) { 243 if (!path) return; 244 const iter = new CK.ContourMeasureIter(path, true, 2); // $ExpectType ContourMeasureIter 245 const contour = iter.next(); // $ExpectType ContourMeasure | null 246 if (!contour) return; 247 const pt = contour.getPosTan(2); // $ExpectType Float32Array 248 contour.getPosTan(2, pt); 249 const segment = contour.getSegment(0, 20, true); // $ExpectType Path 250 const closed = contour.isClosed(); // $ExpectType boolean 251 const length = contour.length(); // $ExpectType number 252} 253 254function imageTests(CK: CanvasKit, imgElement?: HTMLImageElement) { 255 if (!imgElement) return; 256 const buff = new ArrayBuffer(10); 257 const img = CK.MakeImageFromEncoded(buff); // $ExpectType Image | null 258 const img2 = CK.MakeImageFromCanvasImageSource(imgElement); // $ExpectType Image 259 const img3 = CK.MakeImage({ // $ExpectType Image | null 260 width: 1, 261 height: 1, 262 alphaType: CK.AlphaType.Premul, 263 colorType: CK.ColorType.RGBA_8888, 264 colorSpace: CK.ColorSpace.SRGB 265 }, Uint8Array.of(255, 0, 0, 250), 4); 266 const img4 = CK.MakeLazyImageFromTextureSource(imgElement); // $ExpectType Image 267 const img5 = CK.MakeLazyImageFromTextureSource(imgElement, { 268 width: 1, 269 height: 1, 270 alphaType: CK.AlphaType.Premul, 271 colorType: CK.ColorType.RGBA_8888, 272 }); 273 const img6 = CK.MakeLazyImageFromTextureSource(imgElement, { 274 width: 1, 275 height: 1, 276 alphaType: CK.AlphaType.Premul, 277 colorType: CK.ColorType.RGBA_8888, 278 }, true); 279 if (!img) return; 280 const dOne = img.encodeToBytes(); // $ExpectType Uint8Array | null 281 const dTwo = img.encodeToBytes(CK.ImageFormat.JPEG, 97); 282 const h = img.height(); 283 const w = img.width(); 284 const s1 = img.makeShaderCubic(CK.TileMode.Decal, CK.TileMode.Repeat, 1 / 3, 1 / 3); // $ExpectType Shader 285 const mm = img.makeCopyWithDefaultMipmaps(); // $ExpectType Image 286 const s2 = mm.makeShaderOptions(CK.TileMode.Decal, CK.TileMode.Repeat, // $ExpectType Shader 287 CK.FilterMode.Nearest, CK.MipmapMode.Linear, 288 CK.Matrix.identity()); 289 // See https://github.com/microsoft/dtslint/issues/191#issuecomment-1108307671 for below 290 const pixels = img.readPixels(85, 1000, { // $ExpectType Float32Array | Uint8Array | null || Uint8Array | Float32Array | null 291 width: 79, 292 height: 205, 293 colorType: CK.ColorType.RGBA_8888, 294 alphaType: CK.AlphaType.Unpremul, 295 colorSpace: CK.ColorSpace.SRGB, 296 }); 297 const m = CK.Malloc(Uint8Array, 10); 298 img.readPixels(85, 1000, { 299 width: 79, 300 height: 205, 301 colorType: CK.ColorType.RGBA_8888, 302 alphaType: CK.AlphaType.Unpremul, 303 colorSpace: CK.ColorSpace.SRGB, 304 }, m, 4 * 85); 305 const ii = img.getImageInfo(); // $ExpectType PartialImageInfo 306 const cs = img.getColorSpace(); // $ExpectType ColorSpace 307 cs.delete(); 308 img.delete(); 309} 310 311function imageFilterTests(CK: CanvasKit, colorFilter?: ColorFilter, img?: Image, shader?: Shader) { 312 if (!colorFilter || !img || !shader) return; 313 const imgf = CK.ImageFilter; // less typing 314 const filter = imgf.MakeBlur(2, 4, CK.TileMode.Mirror, null); // $ExpectType ImageFilter 315 const filter1 = imgf.MakeBlur(2, 4, CK.TileMode.Decal, filter); // $ExpectType ImageFilter 316 const filter2 = imgf.MakeColorFilter(colorFilter, null); // $ExpectType ImageFilter 317 const filter3 = imgf.MakeColorFilter(colorFilter, filter); // $ExpectType ImageFilter 318 const filter4 = imgf.MakeCompose(null, filter2); // $ExpectType ImageFilter 319 const filter5 = imgf.MakeCompose(filter3, null); // $ExpectType ImageFilter 320 const filter6 = imgf.MakeCompose(filter4, filter2); // $ExpectType ImageFilter 321 const filter7 = imgf.MakeMatrixTransform(CK.Matrix.scaled(2, 3, 10, 10), 322 { B: 0, C: 0.5 }, null); 323 const filter8 = imgf.MakeMatrixTransform(CK.M44.identity(), 324 { filter: CK.FilterMode.Linear, mipmap: CK.MipmapMode.Nearest }, 325 filter6); 326 const filter9 = imgf.MakeMatrixTransform(CK.M44.identity(), 327 { filter: CK.FilterMode.Nearest }, 328 filter6); 329 let filter10 = imgf.MakeBlend(CK.BlendMode.SrcOver, filter8, filter9); // $ExpectType ImageFilter 330 filter10 = imgf.MakeBlend(CK.BlendMode.Xor, null, null); 331 let filter11 = imgf.MakeDilate(2, 10, null); // $ExpectType ImageFilter 332 filter11 = imgf.MakeDilate(2, 10, filter11); 333 let filter12 = imgf.MakeErode(2, 10, null); // $ExpectType ImageFilter 334 filter12 = imgf.MakeErode(2, 10, filter12); 335 let filter13 = imgf.MakeDisplacementMap(// $ExpectType ImageFilter 336 CK.ColorChannel.Red, CK.ColorChannel.Alpha, 3.2, filter11, filter12); 337 filter13 = imgf.MakeDisplacementMap( 338 CK.ColorChannel.Blue, CK.ColorChannel.Green, 512, null, null); 339 let filter14 = imgf.MakeDropShadow(10, -30, 4.0, 2.0, CK.MAGENTA, null); // $ExpectType ImageFilter 340 filter14 = imgf.MakeDropShadow(10, -30, 4.0, 2.0, CK.MAGENTA, filter14); 341 filter14 = imgf.MakeDropShadowOnly(10, -30, 4.0, 2.0, CK.CYAN, null); 342 filter14 = imgf.MakeDropShadowOnly(10, -30, 4.0, 2.0, CK.CYAN, filter14); 343 344 let filter15 = imgf.MakeImage(img, { B: 1 / 3, C: 1 / 3 }); // $ExpectType ImageFilter | null 345 filter15 = imgf.MakeImage(img, { filter: CK.FilterMode.Linear }, 346 CK.LTRBRect(1, 2, 3, 4), CK.XYWHRect(5, 6, 7, 8)); 347 348 let filter16 = imgf.MakeOffset(5, 3, null); // $ExpectType ImageFilter 349 filter16 = imgf.MakeOffset(-100.3, -18, filter16); 350 imgf.MakeShader(shader); // $ExpectType ImageFilter 351} 352 353function fontTests(CK: CanvasKit, face?: Typeface, paint?: Paint) { 354 if (!face || !paint) return; 355 const font = new CK.Font(); // $ExpectType Font 356 const f2 = new CK.Font(face); // $ExpectType Font 357 const f3 = new CK.Font(null); // $ExpectType Font 358 const f4 = new CK.Font(face, 20); // $ExpectType Font 359 const f5 = new CK.Font(null, 20); // $ExpectType Font 360 const f6 = new CK.Font(null, 20, 2, 3); // $ExpectType Font 361 const f7 = new CK.Font(face, 20, 4, 5); // $ExpectType Font 362 363 const glyphMalloc = CK.MallocGlyphIDs(20); 364 const someGlyphs = [1, 2, 3, 4, 5]; 365 366 const glyphBounds = font.getGlyphBounds(glyphMalloc, paint); // $ExpectType Float32Array 367 font.getGlyphBounds(someGlyphs, null, glyphBounds); 368 369 const ids = font.getGlyphIDs('abcd'); 370 font.getGlyphIDs('efgh', 4, ids); 371 372 const widths = font.getGlyphWidths(glyphMalloc, paint); 373 font.getGlyphWidths(someGlyphs, null, widths); 374 375 const sects = font.getGlyphIntercepts(ids, [10, 20], -60, -40); 376 377 font.getScaleX(); 378 font.getSize(); 379 font.getSkewX(); 380 font.getTypeface(); 381 font.setEdging(CK.FontEdging.Alias); 382 font.setEmbeddedBitmaps(true); 383 font.setHinting(CK.FontHinting.Slight); 384 font.setLinearMetrics(true); 385 font.setScaleX(5); 386 font.setSize(15); 387 font.setSkewX(2); 388 font.setSubpixel(true); 389 font.setTypeface(null); 390 font.setTypeface(face); 391} 392 393function fontMgrTests(CK: CanvasKit) { 394 const buff1 = new ArrayBuffer(10); 395 const buff2 = new ArrayBuffer(20); 396 397 const fm = CK.FontMgr.FromData(buff1, buff2)!; 398 fm.countFamilies(); 399 fm.getFamilyName(0); 400} 401 402function globalTests(CK: CanvasKit, path?: Path) { 403 if (!path) { 404 return; 405 } 406 const n = CK.getDecodeCacheLimitBytes(); 407 const u = CK.getDecodeCacheUsedBytes(); 408 CK.setDecodeCacheLimitBytes(1000); 409 const matr = CK.Matrix.rotated(Math.PI / 6); 410 const p = CK.getShadowLocalBounds(matr, path, [0, 0, 1], [500, 500, 20], 20, 411 CK.ShadowDirectionalLight | CK.ShadowGeometricOnly | CK.ShadowDirectionalLight); 412 const mallocedVector3 = CK.Malloc(Float32Array, 3); 413 const q = CK.getShadowLocalBounds(matr, path, mallocedVector3, mallocedVector3, 20, 414 CK.ShadowDirectionalLight | CK.ShadowGeometricOnly | CK.ShadowDirectionalLight); 415} 416 417function paintTests(CK: CanvasKit, colorFilter?: ColorFilter, imageFilter?: ImageFilter, 418 maskFilter?: MaskFilter, pathEffect?: PathEffect, shader?: Shader) { 419 if (!colorFilter || !colorFilter || !imageFilter || !maskFilter || !pathEffect || !shader) { 420 return; 421 } 422 const paint = new CK.Paint(); // $ExpectType Paint 423 const newPaint = paint.copy(); // $ExpectType Paint 424 const color = paint.getColor(); // $ExpectType Float32Array 425 const sc = paint.getStrokeCap(); 426 const sj = paint.getStrokeJoin(); 427 const limit = paint.getStrokeMiter(); // $ExpectType number 428 const width = paint.getStrokeWidth(); // $ExpectType number 429 paint.setAlphaf(0.8); 430 paint.setAntiAlias(true); 431 paint.setBlendMode(CK.BlendMode.DstOut); 432 paint.setColor(CK.RED); 433 paint.setColor([0, 0, 1.2, 0.5], CK.ColorSpace.DISPLAY_P3); 434 paint.setColorComponents(0, 0, 0.9, 1.0); 435 paint.setColorComponents(0, 0, 1.2, 0.5, CK.ColorSpace.DISPLAY_P3); 436 paint.setColorFilter(colorFilter); 437 paint.setColorInt(CK.ColorAsInt(20, 30, 40)); 438 paint.setColorInt(CK.ColorAsInt(20, 30, 40), CK.ColorSpace.SRGB); 439 paint.setImageFilter(imageFilter); 440 paint.setMaskFilter(maskFilter); 441 paint.setPathEffect(pathEffect); 442 paint.setShader(shader); 443 paint.setStrokeCap(CK.StrokeCap.Round); 444 paint.setStrokeJoin(CK.StrokeJoin.Miter); 445 paint.setStrokeMiter(10); 446 paint.setStrokeWidth(20); 447 paint.setStyle(CK.PaintStyle.Fill); 448 paint.delete(); 449} 450 451function pathTests(CK: CanvasKit) { 452 const path = new CK.Path(); // $ExpectType Path 453 const p2 = CK.Path.MakeFromCmds([ // $ExpectType Path | null 454 CK.MOVE_VERB, 0, 10, 455 CK.LINE_VERB, 30, 40, 456 CK.QUAD_VERB, 20, 50, 45, 60, 457 ]); 458 const verbs = CK.Malloc(Uint8Array, 10); 459 const points = CK.Malloc(Float32Array, 10); 460 const p3 = CK.Path.MakeFromVerbsPointsWeights(verbs, [1, 2, 3, 4]); // $ExpectType Path 461 const p4 = CK.Path.MakeFromVerbsPointsWeights([CK.CONIC_VERB], points, [2.3]); 462 const p5 = CK.Path.MakeFromOp(p4, p2!, CK.PathOp.ReverseDifference); // $ExpectType Path | null 463 const p6 = CK.Path.MakeFromSVGString('M 205,5 L 795,5 z'); // $ExpectType Path | null 464 const p7 = p3.makeAsWinding(); // $ExpectType Path | null 465 const someRect = CK.LTRBRect(10, 20, 30, 40); 466 // Making sure arrays are accepted as rrects. 467 const someRRect = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 468 469 path.addArc(someRect, 0, 270); 470 path.addOval(someRect); 471 path.addOval(someRect, true, 3); 472 path.addPath(p2); 473 path.addPoly([20, 20, 40, 40, 20, 40], true); 474 path.addRect(someRect); 475 path.addRect(someRect, true); 476 path.addCircle(10, 10, 10); 477 path.addRRect(someRRect); 478 path.addRRect(someRRect, true); 479 path.addVerbsPointsWeights(verbs, [1, 2, 3, 4]); 480 path.addVerbsPointsWeights([CK.CONIC_VERB], points, [2.3]); 481 path.arc(0, 0, 10, 0, Math.PI / 2); 482 path.arc(0, 0, 10, 0, Math.PI / 2, true); 483 path.arcToOval(someRect, 15, 60, true); 484 path.arcToRotated(2, 4, 90, false, true, 0, 20); 485 path.arcToTangent(20, 20, 40, 50, 2); 486 path.close(); 487 let bounds = path.computeTightBounds(); // $ExpectType Float32Array 488 path.computeTightBounds(bounds); 489 path.conicTo(1, 2, 3, 4, 5); 490 let ok = path.contains(10, 20); // $ExpectType boolean 491 const pCopy = path.copy(); // $ExpectType Path 492 const count = path.countPoints(); // $ExpectType number 493 path.cubicTo(10, 10, 10, 10, 10, 10); 494 ok = path.dash(8, 4, 1); 495 ok = path.equals(pCopy); 496 bounds = path.getBounds(); // $ExpectType Float32Array 497 path.getBounds(bounds); 498 const ft = path.getFillType(); 499 const pt = path.getPoint(7); // $ExpectType Float32Array 500 path.getPoint(8, pt); 501 ok = path.isEmpty(); 502 ok = path.isVolatile(); 503 path.lineTo(10, -20); 504 path.moveTo(-20, -30); 505 path.offset(100, 100); 506 ok = path.op(p2!, CK.PathOp.Difference); 507 path.quadTo(10, 20, 30, 40); 508 path.rArcTo(10, 10, 90, false, true, 2, 4); 509 path.rConicTo(-1, 2, 4, 9, 3); 510 path.rCubicTo(20, 30, 40, 50, 2, 1); 511 path.reset(); 512 path.rewind(); 513 path.rLineTo(20, 30); 514 path.rMoveTo(40, 80); 515 path.rQuadTo(1, 2, 3, 4); 516 path.setFillType(CK.FillType.EvenOdd); 517 path.setIsVolatile(true); 518 ok = path.simplify(); 519 path.stroke(); 520 path.stroke({}); 521 path.stroke({ 522 width: 20, 523 miter_limit: 9, 524 precision: 0.5, 525 cap: CK.StrokeCap.Butt, 526 join: CK.StrokeJoin.Miter, 527 }); 528 const cmds = path.toCmds(); // $ExpectType Float32Array 529 const str = path.toSVGString(); // $ExpectType string 530 path.transform(CK.Matrix.identity()); 531 path.transform(1, 0, 0, 0, 1, 0, 0, 0, 1); 532 path.trim(0.1, 0.7, false); 533 534 if (CK.Path.CanInterpolate(p3, p4)) { 535 const interpolated = CK.Path.MakeFromPathInterpolation(p3, p4, 0.5); // $ExpectType Path | null 536 } 537} 538 539function paragraphTests(CK: CanvasKit, p?: Paragraph) { 540 if (!p) return; 541 const a = p.didExceedMaxLines(); // $ExpectType boolean 542 const b = p.getAlphabeticBaseline(); // $ExpectType number 543 const c = p.getGlyphPositionAtCoordinate(10, 3); // $ExpectType PositionWithAffinity 544 const d = p.getHeight(); // $ExpectType number 545 const e = p.getIdeographicBaseline(); // $ExpectType number 546 const f = p.getLongestLine(); // $ExpectType number 547 const g = p.getMaxIntrinsicWidth(); // $ExpectType number 548 const h = p.getMaxWidth(); // $ExpectType number 549 const i = p.getMinIntrinsicWidth(); // $ExpectType number 550 const j = p.getRectsForPlaceholders(); // $ExpectType RectWithDirection[] 551 const k = p.getRectsForRange(2, 10, CK.RectHeightStyle.Max, // $ExpectType RectWithDirection[] 552 CK.RectWidthStyle.Tight); 553 j[0].rect.length === 4; 554 j[0].dir === CK.TextDirection.RTL; 555 const l = p.getWordBoundary(10); // $ExpectType URange 556 p.layout(300); 557 const m = p.getLineMetrics(); // $ExpectType LineMetrics[] 558 const n = CK.GlyphRunFlags.IsWhiteSpace === 1; 559} 560 561function paragraphBuilderTests(CK: CanvasKit, fontMgr?: FontMgr, paint?: Paint) { 562 if (!fontMgr || !paint) return; 563 const paraStyle = new CK.ParagraphStyle({ // $ExpectType ParagraphStyle 564 textStyle: { 565 color: CK.BLACK, 566 fontFamilies: ['Noto Serif'], 567 fontSize: 20, 568 }, 569 textAlign: CK.TextAlign.Center, 570 maxLines: 8, 571 ellipsis: '.._.', 572 strutStyle: { 573 strutEnabled: true, 574 fontFamilies: ['Roboto'], 575 fontSize: 28, 576 heightMultiplier: 1.5, 577 forceStrutHeight: true, 578 }, 579 disableHinting: true, 580 heightMultiplier: 2.5, 581 textDirection: CK.TextDirection.LTR, 582 textHeightBehavior: CK.TextHeightBehavior.DisableFirstAscent 583 }); 584 const blueText = new CK.TextStyle({ // $ExpectType TextStyle 585 backgroundColor: CK.Color(234, 208, 232), // light pink 586 color: CK.Color(48, 37, 199), 587 fontFamilies: ['Noto Serif'], 588 decoration: CK.LineThroughDecoration, 589 decorationStyle: CK.DecorationStyle.Dashed, 590 decorationThickness: 1.5, // multiplier based on font size 591 fontSize: 24, 592 fontFeatures: [{name: 'smcp', value: 1}], 593 fontVariations: [{axis: 'wght', value: 100}], 594 shadows: [{color: CK.BLACK, blurRadius: 15}, 595 {color: CK.RED, blurRadius: 5, offset: [10, 10]}], 596 }); 597 598 const builder = CK.ParagraphBuilder.Make(paraStyle, fontMgr); // $ExpectType ParagraphBuilder 599 600 builder.pushStyle(blueText); 601 builder.addText('VAVAVAVAVAVAVA\nVAVA\n'); 602 builder.pop(); 603 const paragraph = builder.build(); // $ExpectType Paragraph 604 605 const buf = new ArrayBuffer(10); 606 const fontSrc = CK.TypefaceFontProvider.Make(); // $ExpectType TypefaceFontProvider 607 fontSrc.registerFont(buf, 'sans-serif'); 608 const builder2 = CK.ParagraphBuilder.MakeFromFontProvider(// $ExpectType ParagraphBuilder 609 paraStyle, fontSrc); 610 builder2.pushPaintStyle(blueText, paint, paint); 611 builder2.addPlaceholder(); 612 builder2.addPlaceholder(10, 20, CK.PlaceholderAlignment.Top, CK.TextBaseline.Ideographic, 3); 613 builder2.reset(); 614 615 const text = builder.getText(); // $ExpectType string 616 builder.setWordsUtf16(new Uint32Array(10)); 617 builder.setGraphemeBreaksUtf16(new Uint32Array(10)); 618 builder.setLineBreaksUtf16(new Uint32Array(10)); 619 const paragraph3 = builder.build(); // $ExpectType Paragraph 620} 621 622function pathEffectTests(CK: CanvasKit, path?: Path) { 623 if (!path) { 624 return; 625 } 626 const pe1 = CK.PathEffect.MakeCorner(2); // $ExpectType PathEffect | null 627 const pe2 = CK.PathEffect.MakeDash([2, 4]); // $ExpectType PathEffect 628 const pe3 = CK.PathEffect.MakeDash([2, 4, 6, 8], 10); // $ExpectType PathEffect 629 const pe4 = CK.PathEffect.MakeDiscrete(10, 2, 0); // $ExpectType PathEffect 630 const pe5 = CK.PathEffect.MakePath1D(path, 3, 4, CK.Path1DEffect.Morph); // $ExpectType PathEffect | null 631 const matr = CK.Matrix.scaled(3, 2); 632 const pe6 = CK.PathEffect.MakePath2D(matr, path); // $ExpectType PathEffect | null 633 const pe7 = CK.PathEffect.MakeLine2D(3.2, matr); // $ExpectType PathEffect | null 634} 635 636function mallocTests(CK: CanvasKit) { 637 const mFoo = CK.Malloc(Float32Array, 5); 638 const mArray = mFoo.toTypedArray(); // $ExpectType TypedArray 639 mArray[3] = 1.7; 640 const mSubArray = mFoo.subarray(0, 2); // $ExpectType TypedArray 641 mSubArray[0] = 2; 642 CK.Free(mFoo); 643} 644 645function maskFilterTests(CK: CanvasKit) { 646 const mf = CK.MaskFilter.MakeBlur(CK.BlurStyle.Solid, 8, false); // $ExpectType MaskFilter 647} 648 649function matrixTests(CK: CanvasKit) { 650 const m33 = CK.Matrix; // less typing 651 const matrA = m33.identity(); // $ExpectType number[] 652 const matrB = m33.rotated(0.1); // $ExpectType number[] 653 const matrC = m33.rotated(0.1, 15, 20); // $ExpectType number[] 654 const matrD = m33.multiply(matrA, matrB); // $ExpectType number[] 655 const matrE = m33.multiply(matrA, matrB, matrC, matrB, matrA); // $ExpectType number[] 656 const matrF = m33.scaled(1, 2); // $ExpectType number[] 657 const matrG = m33.scaled(1, 2, 3, 4); // $ExpectType number[] 658 const matrH = m33.skewed(1, 2); // $ExpectType number[] 659 const matrI = m33.skewed(1, 2, 3, 4); // $ExpectType number[] 660 const matrJ = m33.translated(1, 2); // $ExpectType number[] 661 const matrK = m33.invert(matrJ); 662 663 const m44 = CK.M44; 664 const matr1 = m44.identity(); // $ExpectType number[] 665 const matr2 = m44.invert(matr1); 666 const matr3 = m44.lookat([1, 2, 3], [4, 5, 6], [7, 8, 9]); // $ExpectType number[] 667 const matr4 = m44.multiply(matr1, matr3); // $ExpectType number[] 668 const matr5 = m44.mustInvert(matr1); // $ExpectType number[] 669 const matr6 = m44.perspective(1, 8, 0.4); // $ExpectType number[] 670 const matr7 = m44.rc(matr6, 0, 3); // $ExpectType number 671 const matr8 = m44.rotated([2, 3, 4], -0.4); // $ExpectType number[] 672 const matr9 = m44.rotatedUnitSinCos([4, 3, 2], 0.9, 0.1); // $ExpectType number[] 673 const matr10 = m44.scaled([5, 5, 5]); // $ExpectType number[] 674 const matr11 = m44.setupCamera(CK.LTRBRect(1, 2, 3, 4), 0.4, { 675 eye: [0, 0, 1], 676 coa: [0, 0, 0], 677 up: [0, 1, 0], 678 near: 0.2, 679 far: 4, 680 angle: Math.PI / 12, 681 }); 682 const matr12 = m44.translated([3, 2, 1]); // $ExpectType number[] 683 const matr13 = m44.transpose([4, 5, 8]); // $ExpectType number[] 684} 685 686function pictureTests(CK: CanvasKit) { 687 const recorder = new CK.PictureRecorder(); // $ExpectType PictureRecorder 688 const canvas = recorder.beginRecording(CK.LTRBRect(0, 0, 100, 100)); // $ExpectType Canvas 689 const pic = recorder.finishRecordingAsPicture(); // $ExpectType SkPicture 690 const bytes = pic.serialize(); // $ExpectType Uint8Array | null 691 const pic2 = CK.MakePicture(bytes!); 692 const shader1 = pic2!.makeShader(CK.TileMode.Clamp, CK.TileMode.Decal, CK.FilterMode.Nearest); 693 const shader2 = pic2!.makeShader(CK.TileMode.Clamp, CK.TileMode.Decal, CK.FilterMode.Nearest, 694 CK.Matrix.rotated(3)); 695 const shader3 = pic2!.makeShader(CK.TileMode.Clamp, CK.TileMode.Decal, CK.FilterMode.Nearest, 696 CK.Matrix.skewed(2, 1), CK.LTRBRect(3, 4, 5, 6)); 697} 698 699function rectangleTests(CK: CanvasKit) { 700 const rectOne = CK.LTRBRect(5, 10, 20, 30); // $ExpectType Float32Array 701 const rectTwo = CK.XYWHRect(5, 10, 15, 20); // $ExpectType Float32Array 702 const iRectOne = CK.LTRBiRect(105, 110, 120, 130); // $ExpectType Int32Array 703 const iRectTwo = CK.XYWHiRect(105, 110, 15, 20); // $ExpectType Int32Array 704 const rrectOne = CK.RRectXY(rectOne, 3, 7); // $ExpectType Float32Array 705} 706 707function runtimeEffectTests(CK: CanvasKit) { 708 const rt = CK.RuntimeEffect.Make('not real sksl code'); // $ExpectType RuntimeEffect | null 709 if (!rt) return; 710 const rt2 = CK.RuntimeEffect.Make('not real sksl code', (err) => { 711 console.log(err); 712 }); 713 const someMatr = CK.Matrix.translated(2, 60); 714 const s1 = rt.makeShader([0, 1]); // $ExpectType Shader 715 const s2 = rt.makeShader([0, 1], someMatr); // $ExpectType Shader 716 const s3 = rt.makeShaderWithChildren([4, 5], [s1, s2]); // $ExpectType Shader 717 const s4 = rt.makeShaderWithChildren([4, 5], [s1, s2], someMatr); // $ExpectType Shader 718 const a = rt.getUniform(1); // $ExpectType SkSLUniform 719 const b = rt.getUniformCount(); // $ExpectType number 720 const c = rt.getUniformFloatCount(); // $ExpectType number 721 const d = rt.getUniformName(3); // $ExpectType string 722} 723 724function skottieTests(CK: CanvasKit, canvas?: Canvas) { 725 if (!canvas) return; 726 727 const anim = CK.MakeAnimation('some json'); // $ExpectType SkottieAnimation 728 const a = anim.duration(); // $ExpectType number 729 const b = anim.fps(); // $ExpectType number 730 const c = anim.version(); // $ExpectType string 731 const d = anim.size(); // $ExpectType Float32Array 732 anim.size(d); 733 const rect = anim.seek(0.5); 734 anim.seek(0.6, rect); 735 const rect2 = anim.seekFrame(12.3); 736 anim.seekFrame(12.3, rect2); 737 anim.render(canvas); 738 anim.render(canvas, rect); 739 740 const buff = new ArrayBuffer(10); 741 const mAnim = CK.MakeManagedAnimation('other json', { // $ExpectType ManagedSkottieAnimation 742 'flightAnim.gif': buff, 743 }); 744 mAnim.setColor('slider', CK.WHITE); 745 mAnim.setOpacity('slider', 0.8); 746 const e = mAnim.getMarkers(); // $ExpectType AnimationMarker[] 747 const f = mAnim.getColorProps(); // $ExpectType ColorProperty[] 748 const g = mAnim.getOpacityProps(); // $ExpectType OpacityProperty[] 749 const h = mAnim.getTextProps(); // $ExpectType TextProperty[] 750 751 const i = mAnim.setColor('foo', CK.RED); // $ExpectType boolean 752 const j = mAnim.setOpacity('foo', 0.5); // $ExpectType boolean 753 const k = mAnim.setText('foo', 'bar', 12); // $ExpectType boolean 754} 755 756function shaderTests(CK: CanvasKit) { 757 const s1 = CK.Shader.MakeColor([0.8, 0.2, 0.5, 0.9], // $ExpectType Shader 758 CK.ColorSpace.SRGB); 759 const s2 = CK.Shader.MakeBlend(CK.BlendMode.Src, s1, s1); // $ExpectType Shader 760 const s4 = CK.Shader.MakeLinearGradient(// $ExpectType Shader 761 [0, 0], [50, 100], 762 Float32Array.of( 763 0, 1, 0, 0.8, 764 1, 0, 0, 1, 765 0, 0, 1, 0.5, 766 ), 767 [0, 0.65, 1.0], 768 CK.TileMode.Mirror 769 ); 770 const s5 = CK.Shader.MakeLinearGradient(// $ExpectType Shader 771 [0, 0], [50, 100], 772 Float32Array.of( 773 0, 1, 0, 0.8, 774 1, 0, 0, 1, 775 0, 0, 1, 0.5, 776 ), 777 null, 778 CK.TileMode.Clamp, 779 CK.Matrix.rotated(Math.PI / 4, 0, 100), 780 1, 781 CK.ColorSpace.SRGB, 782 ); 783 const s6 = CK.Shader.MakeRadialGradient(// $ExpectType Shader 784 [0, 0], 50, 785 Float32Array.of( 786 0, 1, 0, 0.8, 787 1, 0, 0, 1, 788 0, 0, 1, 0.5, 789 ), 790 [0, 0.65, 1.0], 791 CK.TileMode.Decal, 792 ); 793 const s7 = CK.Shader.MakeRadialGradient(// $ExpectType Shader 794 [0, 0], 50, 795 Float32Array.of( 796 0, 1, 0, 0.8, 797 1, 0, 0, 1, 798 0, 0, 1, 0.5, 799 ), 800 null, 801 CK.TileMode.Clamp, 802 CK.Matrix.skewed(3, -3), 803 1, 804 CK.ColorSpace.SRGB, 805 ); 806 const s8 = CK.Shader.MakeTwoPointConicalGradient(// $ExpectType Shader 807 [0, 0], 20, 808 [50, 100], 60, 809 Float32Array.of( 810 0, 1, 0, 0.8, 811 1, 0, 0, 1, 812 0, 0, 1, 0.5, 813 ), 814 [0, 0.65, 1.0], 815 CK.TileMode.Mirror 816 ); 817 const s9 = CK.Shader.MakeTwoPointConicalGradient(// $ExpectType Shader 818 [0, 0], 20, 819 [50, 100], 60, 820 Float32Array.of( 821 0, 1, 0, 0.8, 822 1, 0, 0, 1, 823 0, 0, 1, 0.5, 824 ), 825 [0, 0.65, 1.0], 826 CK.TileMode.Mirror, 827 CK.Matrix.rotated(Math.PI / 4, 0, 100), 828 1, 829 CK.ColorSpace.SRGB, 830 ); 831 const s10 = CK.Shader.MakeSweepGradient(// $ExpectType Shader 832 0, 20, 833 Float32Array.of( 834 0, 1, 0, 0.8, 835 1, 0, 0, 1, 836 0, 0, 1, 0.5, 837 ), 838 [0, 0.65, 1.0], 839 CK.TileMode.Mirror 840 ); 841 const s11 = CK.Shader.MakeSweepGradient(// $ExpectType Shader 842 0, 20, 843 Float32Array.of( 844 0, 1, 0, 0.8, 845 1, 0, 0, 1, 846 0, 0, 1, 0.5, 847 ), 848 null, 849 CK.TileMode.Mirror, 850 CK.Matrix.rotated(Math.PI / 4, 0, 100), 851 1, 852 15, 275, // start, end angle in degrees. 853 CK.ColorSpace.SRGB, 854 ); 855 const s12 = CK.Shader.MakeFractalNoise(0.1, 0.05, 2, 0, 80, 80); // $ExpectType Shader 856 const s13 = CK.Shader.MakeTurbulence(0.1, 0.05, 2, 0, 80, 80); // $ExpectType Shader 857} 858 859function surfaceTests(CK: CanvasKit, gl?: WebGLRenderingContext) { 860 if (!gl) { 861 return; 862 } 863 const canvasEl = document.querySelector('canvas') as HTMLCanvasElement; 864 const surfaceOne = CK.MakeCanvasSurface(canvasEl)!; // $ExpectType Surface 865 const surfaceTwo = CK.MakeCanvasSurface('my_canvas')!; 866 const surfaceThree = CK.MakeSWCanvasSurface(canvasEl)!; // $ExpectType Surface 867 const surfaceFour = CK.MakeSWCanvasSurface('my_canvas')!; 868 const surfaceFive = CK.MakeWebGLCanvasSurface(canvasEl, // $ExpectType Surface 869 CK.ColorSpace.SRGB, { 870 majorVersion: 2, 871 preferLowPowerToHighPerformance: 1, 872 })!; 873 const surfaceSix = CK.MakeWebGLCanvasSurface('my_canvas', CK.ColorSpace.DISPLAY_P3, { 874 enableExtensionsByDefault: 2, 875 })!; 876 const surfaceSeven = CK.MakeSurface(200, 200)!; // $ExpectType Surface 877 const m = CK.Malloc(Uint8Array, 5 * 5 * 4); 878 const surfaceEight = CK.MakeRasterDirectSurface({ 879 width: 5, 880 height: 5, 881 colorType: CK.ColorType.RGBA_8888, 882 alphaType: CK.AlphaType.Premul, 883 colorSpace: CK.ColorSpace.SRGB, 884 }, m, 20); 885 886 surfaceOne.flush(); 887 const canvas = surfaceTwo.getCanvas(); // $ExpectType Canvas 888 const ii = surfaceThree.imageInfo(); // $ExpectType ImageInfo 889 const h = surfaceFour.height(); // $ExpectType number 890 const w = surfaceFive.width(); // $ExpectType number 891 const subsurface = surfaceOne.makeSurface(ii); // $ExpectType Surface 892 const isGPU = subsurface.reportBackendTypeIsGPU(); // $ExpectType boolean 893 const count = surfaceThree.sampleCnt(); // $ExpectType number 894 const img = surfaceFour.makeImageSnapshot([0, 3, 2, 5]); // $ExpectType Image 895 const img2 = surfaceSix.makeImageSnapshot(); // $ExpectType Image 896 const img3 = surfaceFour.makeImageFromTexture(gl.createTexture()!, { 897 height: 40, 898 width: 80, 899 colorType: CK.ColorType.RGBA_8888, 900 alphaType: CK.AlphaType.Unpremul, 901 colorSpace: CK.ColorSpace.SRGB, 902 }); 903 const img4 = surfaceFour.makeImageFromTextureSource(new Image()); // $ExpectType Image | null 904 const videoEle = document.createElement('video'); 905 const img5 = surfaceFour.makeImageFromTextureSource(videoEle, { 906 height: 40, 907 width: 80, 908 colorType: CK.ColorType.RGBA_8888, 909 alphaType: CK.AlphaType.Unpremul, 910 }); 911 const img6 = surfaceFour.makeImageFromTextureSource(new ImageData(40, 80)); // $ExpectType Image | null 912 const img7 = surfaceFour.makeImageFromTextureSource(videoEle, { 913 height: 40, 914 width: 80, 915 colorType: CK.ColorType.RGBA_8888, 916 alphaType: CK.AlphaType.Premul, 917 }, true); 918 surfaceSeven.delete(); 919 920 const ctx = CK.GetWebGLContext(canvasEl); // $ExpectType number 921 CK.deleteContext(ctx); 922 const grCtx = CK.MakeGrContext(ctx); 923 const surfaceNine = CK.MakeOnScreenGLSurface(grCtx!, 100, 400, // $ExpectType Surface 924 CK.ColorSpace.ADOBE_RGB)!; 925 926 var sample = gl.getParameter(gl.SAMPLES); 927 var stencil = gl.getParameter(gl.STENCIL_BITS); 928 const surfaceTen = CK.MakeOnScreenGLSurface(grCtx!, 100, 400, // $ExpectType Surface 929 CK.ColorSpace.ADOBE_RGB, sample, stencil)!; 930 931 const rt = CK.MakeRenderTarget(grCtx!, 100, 200); // $ExpectType Surface | null 932 const rt2 = CK.MakeRenderTarget(grCtx!, { // $ExpectType Surface | null 933 width: 79, 934 height: 205, 935 colorType: CK.ColorType.RGBA_8888, 936 alphaType: CK.AlphaType.Premul, 937 colorSpace: CK.ColorSpace.SRGB, 938 }); 939 940 const drawFrame = (canvas: Canvas) => { 941 canvas.clear([0, 0, 0, 0]); 942 }; 943 surfaceFour.requestAnimationFrame(drawFrame); 944 surfaceFour.drawOnce(drawFrame); 945 946 surfaceFour.updateTextureFromSource(img5!, videoEle); 947 surfaceFour.updateTextureFromSource(img5!, videoEle, true); 948} 949 950function textBlobTests(CK: CanvasKit, font?: Font, path?: Path) { 951 if (!font || !path) return; 952 const tb = CK.TextBlob; // less typing 953 const ids = font.getGlyphIDs('abc'); 954 const mXforms = CK.Malloc(Float32Array, ids.length * 4); 955 956 const blob = tb.MakeFromGlyphs([5, 6, 7, 8], font); // $ExpectType TextBlob 957 const blob1 = tb.MakeFromGlyphs(ids, font); // $ExpectType TextBlob 958 const blob2 = tb.MakeFromRSXform('cdf', mXforms, font); // $ExpectType TextBlob 959 const blob3 = tb.MakeFromRSXform('c', [-1, 0, 2, 3], font); // $ExpectType TextBlob 960 const blob4 = tb.MakeFromRSXformGlyphs([3, 6], mXforms, font); // $ExpectType TextBlob 961 const blob5 = tb.MakeFromRSXformGlyphs(ids, [-1, 0, 2, 3], font); // $ExpectType TextBlob 962 const blob6 = tb.MakeFromText('xyz', font); // $ExpectType TextBlob 963 const blob7 = tb.MakeOnPath('tuv', path, font); // $ExpectType TextBlob 964 const blob8 = tb.MakeOnPath('tuv', path, font, 10); // $ExpectType TextBlob 965} 966 967function typefaceTests(CK: CanvasKit) { 968 const face = CK.Typeface.MakeFreeTypeFaceFromData(new ArrayBuffer(10)); 969 970 const ids = face!.getGlyphIDs('abcd'); 971 face!.getGlyphIDs('efgh', 4, ids); 972} 973 974function vectorTests(CK: CanvasKit) { 975 const a = [1, 2, 3]; 976 const b = [4, 5, 6]; 977 978 const vec = CK.Vector; // less typing 979 const v1 = vec.add(a, b); // $ExpectType VectorN 980 const v2 = vec.cross(a, b); // $ExpectType Vector3 981 const n1 = vec.dist(a, b); // $ExpectType number 982 const n2 = vec.dot(a, b); // $ExpectType number 983 const n3 = vec.length(a); // $ExpectType number 984 const n4 = vec.lengthSquared(a); // $ExpectType number 985 const v3 = vec.mulScalar(a, 10); // $ExpectType VectorN 986 const v4 = vec.normalize(a); // $ExpectType VectorN 987 const v5 = vec.sub(a, b); // $ExpectType VectorN 988} 989 990function verticesTests(CK: CanvasKit) { 991 const points = [ 992 70, 170, 40, 90, 130, 150, 100, 50, 993 225, 150, 225, 60, 310, 180, 330, 100, 994 ]; 995 const textureCoordinates = [ 996 0, 240, 0, 0, 80, 240, 80, 0, 997 160, 240, 160, 0, 240, 240, 240, 0, 998 ]; 999 const vertices = CK.MakeVertices(CK.VertexMode.TrianglesStrip, // $ExpectType Vertices 1000 points, textureCoordinates); 1001 1002 const points2 = new Float32Array(points); 1003 // 1d float color array 1004 const colors = Float32Array.of( 1005 1, 0, 0, 1, // red 1006 0, 1, 0, 1, // green 1007 0, 0, 1, 1, // blue 1008 1, 0, 1, 1); // purple 1009 const vertices2 = CK.MakeVertices(CK.VertexMode.TriangleFan, 1010 points2, null, colors, null, true); 1011 1012 const rect = vertices.bounds(); // $ExpectType Float32Array 1013 vertices.bounds(rect); 1014 const id = vertices.uniqueID(); // $ExpectType number 1015} 1016 1017function webGPUTest(CK: CanvasKit, device?: GPUDevice, canvas?: HTMLCanvasElement, texture?: GPUTexture) { 1018 if (!device || !canvas || !texture) { 1019 return; 1020 } 1021 1022 const gpuContext: WebGPUDeviceContext = CK.MakeGPUDeviceContext(device)!; // $ExpectType GrDirectContext 1023 1024 // Texture surface. 1025 const surface1 = CK.MakeGPUTextureSurface(gpuContext, texture, 800, 600, // $ExpectType Surface | null 1026 CK.ColorSpace.SRGB); 1027 1028 // Canvas surfaces. 1029 const canvasContext = CK.MakeGPUCanvasContext(gpuContext, canvas, { // $ExpectType WebGPUCanvasContext 1030 format: "bgra8unorm", 1031 alphaMode: "premultiplied", 1032 })!; 1033 canvasContext.requestAnimationFrame((canvas: Canvas) => { 1034 canvas.clear([0, 0, 0, 0]); 1035 }); 1036 1037 const surface2 = CK.MakeGPUCanvasSurface(canvasContext, CK.ColorSpace.SRGB); // $ExpectType Surface | null 1038 const surface3 = CK.MakeGPUCanvasSurface(canvasContext, CK.ColorSpace.SRGB, 10, 10); // $ExpectType Surface | null 1039} 1040