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.setDither(true); 440 paint.setImageFilter(imageFilter); 441 paint.setMaskFilter(maskFilter); 442 paint.setPathEffect(pathEffect); 443 // @ts-expect-error 444 paint.setShader(colorFilter); 445 paint.setShader(shader); 446 paint.setStrokeCap(CK.StrokeCap.Round); 447 paint.setStrokeJoin(CK.StrokeJoin.Miter); 448 paint.setStrokeMiter(10); 449 paint.setStrokeWidth(20); 450 paint.setStyle(CK.PaintStyle.Fill); 451 paint.delete(); 452} 453 454function pathTests(CK: CanvasKit) { 455 const path = new CK.Path(); // $ExpectType Path 456 const p2 = CK.Path.MakeFromCmds([ // $ExpectType Path | null 457 CK.MOVE_VERB, 0, 10, 458 CK.LINE_VERB, 30, 40, 459 CK.QUAD_VERB, 20, 50, 45, 60, 460 ]); 461 const verbs = CK.Malloc(Uint8Array, 10); 462 const points = CK.Malloc(Float32Array, 10); 463 const p3 = CK.Path.MakeFromVerbsPointsWeights(verbs, [1, 2, 3, 4]); // $ExpectType Path 464 const p4 = CK.Path.MakeFromVerbsPointsWeights([CK.CONIC_VERB], points, [2.3]); 465 const p5 = CK.Path.MakeFromOp(p4, p2!, CK.PathOp.ReverseDifference); // $ExpectType Path | null 466 const p6 = CK.Path.MakeFromSVGString('M 205,5 L 795,5 z'); // $ExpectType Path | null 467 const p7 = p3.makeAsWinding(); // $ExpectType Path | null 468 const someRect = CK.LTRBRect(10, 20, 30, 40); 469 // Making sure arrays are accepted as rrects. 470 const someRRect = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 471 472 path.addArc(someRect, 0, 270); 473 path.addOval(someRect); 474 path.addOval(someRect, true, 3); 475 path.addPath(p2); 476 path.addPoly([20, 20, 40, 40, 20, 40], true); 477 path.addRect(someRect); 478 path.addRect(someRect, true); 479 path.addCircle(10, 10, 10); 480 path.addRRect(someRRect); 481 path.addRRect(someRRect, true); 482 path.addVerbsPointsWeights(verbs, [1, 2, 3, 4]); 483 path.addVerbsPointsWeights([CK.CONIC_VERB], points, [2.3]); 484 path.arc(0, 0, 10, 0, Math.PI / 2); 485 path.arc(0, 0, 10, 0, Math.PI / 2, true); 486 path.arcToOval(someRect, 15, 60, true); 487 path.arcToRotated(2, 4, 90, false, true, 0, 20); 488 path.arcToTangent(20, 20, 40, 50, 2); 489 path.close(); 490 let bounds = path.computeTightBounds(); // $ExpectType Float32Array 491 path.computeTightBounds(bounds); 492 path.conicTo(1, 2, 3, 4, 5); 493 let ok = path.contains(10, 20); // $ExpectType boolean 494 const pCopy = path.copy(); // $ExpectType Path 495 const count = path.countPoints(); // $ExpectType number 496 path.cubicTo(10, 10, 10, 10, 10, 10); 497 ok = path.dash(8, 4, 1); 498 ok = path.equals(pCopy); 499 bounds = path.getBounds(); // $ExpectType Float32Array 500 path.getBounds(bounds); 501 const ft = path.getFillType(); 502 const pt = path.getPoint(7); // $ExpectType Float32Array 503 path.getPoint(8, pt); 504 ok = path.isEmpty(); 505 ok = path.isVolatile(); 506 path.lineTo(10, -20); 507 path.moveTo(-20, -30); 508 path.offset(100, 100); 509 ok = path.op(p2!, CK.PathOp.Difference); 510 path.quadTo(10, 20, 30, 40); 511 path.rArcTo(10, 10, 90, false, true, 2, 4); 512 path.rConicTo(-1, 2, 4, 9, 3); 513 path.rCubicTo(20, 30, 40, 50, 2, 1); 514 path.reset(); 515 path.rewind(); 516 path.rLineTo(20, 30); 517 path.rMoveTo(40, 80); 518 path.rQuadTo(1, 2, 3, 4); 519 path.setFillType(CK.FillType.EvenOdd); 520 path.setIsVolatile(true); 521 ok = path.simplify(); 522 path.stroke(); 523 path.stroke({}); 524 path.stroke({ 525 width: 20, 526 miter_limit: 9, 527 precision: 0.5, 528 cap: CK.StrokeCap.Butt, 529 join: CK.StrokeJoin.Miter, 530 }); 531 const cmds = path.toCmds(); // $ExpectType Float32Array 532 const str = path.toSVGString(); // $ExpectType string 533 path.transform(CK.Matrix.identity()); 534 path.transform(1, 0, 0, 0, 1, 0, 0, 0, 1); 535 path.trim(0.1, 0.7, false); 536 537 if (CK.Path.CanInterpolate(p3, p4)) { 538 const interpolated = CK.Path.MakeFromPathInterpolation(p3, p4, 0.5); // $ExpectType Path | null 539 } 540} 541 542function paragraphTests(CK: CanvasKit, p?: Paragraph) { 543 if (!p) return; 544 const a = p.didExceedMaxLines(); // $ExpectType boolean 545 const b = p.getAlphabeticBaseline(); // $ExpectType number 546 const c = p.getGlyphPositionAtCoordinate(10, 3); // $ExpectType PositionWithAffinity 547 const d = p.getHeight(); // $ExpectType number 548 const e = p.getIdeographicBaseline(); // $ExpectType number 549 const f = p.getLongestLine(); // $ExpectType number 550 const g = p.getMaxIntrinsicWidth(); // $ExpectType number 551 const h = p.getMaxWidth(); // $ExpectType number 552 const i = p.getMinIntrinsicWidth(); // $ExpectType number 553 const j = p.getRectsForPlaceholders(); // $ExpectType RectWithDirection[] 554 const k = p.getRectsForRange(2, 10, CK.RectHeightStyle.Max, // $ExpectType RectWithDirection[] 555 CK.RectWidthStyle.Tight); 556 j[0].rect.length === 4; 557 j[0].dir === CK.TextDirection.RTL; 558 const l = p.getWordBoundary(10); // $ExpectType URange 559 p.layout(300); 560 const m = p.getLineMetrics(); // $ExpectType LineMetrics[] 561 const n = CK.GlyphRunFlags.IsWhiteSpace === 1; 562 const o = p.unresolvedCodepoints(); // $ExpectType number[] 563 const q = p.getLineMetricsAt(0); // $ExpectType LineMetrics | null 564 const r = p.getNumberOfLines(); // $ExpectType number 565 const s = p.getLineNumberAt(0); // $ExpectType number 566 const t = p.getGlyphInfoAt(0); // $ExpectType GlyphInfo | null 567 const u = p.getClosestGlyphInfoAtCoordinate(10, 3); // $ExpectType GlyphInfo | null 568} 569 570function paragraphBuilderTests(CK: CanvasKit, fontMgr?: FontMgr, paint?: Paint) { 571 if (!fontMgr || !paint) return; 572 const paraStyle = new CK.ParagraphStyle({ // $ExpectType ParagraphStyle 573 textStyle: { 574 color: CK.BLACK, 575 fontFamilies: ['Noto Serif'], 576 fontSize: 20, 577 }, 578 textAlign: CK.TextAlign.Center, 579 maxLines: 8, 580 ellipsis: '.._.', 581 strutStyle: { 582 strutEnabled: true, 583 fontFamilies: ['Roboto'], 584 fontSize: 28, 585 heightMultiplier: 1.5, 586 forceStrutHeight: true, 587 }, 588 disableHinting: true, 589 heightMultiplier: 2.5, 590 textDirection: CK.TextDirection.LTR, 591 textHeightBehavior: CK.TextHeightBehavior.DisableFirstAscent 592 }); 593 const blueText = new CK.TextStyle({ // $ExpectType TextStyle 594 backgroundColor: CK.Color(234, 208, 232), // light pink 595 color: CK.Color(48, 37, 199), 596 fontFamilies: ['Noto Serif'], 597 decoration: CK.LineThroughDecoration, 598 decorationStyle: CK.DecorationStyle.Dashed, 599 decorationThickness: 1.5, // multiplier based on font size 600 fontSize: 24, 601 fontFeatures: [{name: 'smcp', value: 1}], 602 fontVariations: [{axis: 'wght', value: 100}], 603 shadows: [{color: CK.BLACK, blurRadius: 15}, 604 {color: CK.RED, blurRadius: 5, offset: [10, 10]}], 605 }); 606 607 const builder = CK.ParagraphBuilder.Make(paraStyle, fontMgr); // $ExpectType ParagraphBuilder 608 609 builder.pushStyle(blueText); 610 builder.addText('VAVAVAVAVAVAVA\nVAVA\n'); 611 builder.pop(); 612 const paragraph = builder.build(); // $ExpectType Paragraph 613 614 const buf = new ArrayBuffer(10); 615 const fontSrc = CK.TypefaceFontProvider.Make(); // $ExpectType TypefaceFontProvider 616 fontSrc.registerFont(buf, 'sans-serif'); 617 const builder2 = CK.ParagraphBuilder.MakeFromFontProvider(// $ExpectType ParagraphBuilder 618 paraStyle, fontSrc); 619 builder2.pushPaintStyle(blueText, paint, paint); 620 builder2.addPlaceholder(); 621 builder2.addPlaceholder(10, 20, CK.PlaceholderAlignment.Top, CK.TextBaseline.Ideographic, 3); 622 builder2.reset(); 623 624 const text = builder.getText(); // $ExpectType string 625 builder.setWordsUtf16(new Uint32Array(10)); 626 builder.setGraphemeBreaksUtf16(new Uint32Array(10)); 627 builder.setLineBreaksUtf16(new Uint32Array(10)); 628 const paragraph3 = builder.build(); // $ExpectType Paragraph 629 630 const fontCollection = CK.FontCollection.Make(); // $ExpectType FontCollection 631 fontCollection.enableFontFallback(); 632 fontCollection.setDefaultFontManager(fontSrc); 633 const fcBuilder = CK.ParagraphBuilder.MakeFromFontCollection(// $ExpectType ParagraphBuilder 634 paraStyle, fontCollection); 635 fcBuilder.addText('12345'); 636 const fcParagraph = fcBuilder.build(); 637} 638 639function pathEffectTests(CK: CanvasKit, path?: Path) { 640 if (!path) { 641 return; 642 } 643 const pe1 = CK.PathEffect.MakeCorner(2); // $ExpectType PathEffect | null 644 const pe2 = CK.PathEffect.MakeDash([2, 4]); // $ExpectType PathEffect 645 const pe3 = CK.PathEffect.MakeDash([2, 4, 6, 8], 10); // $ExpectType PathEffect 646 const pe4 = CK.PathEffect.MakeDiscrete(10, 2, 0); // $ExpectType PathEffect 647 const pe5 = CK.PathEffect.MakePath1D(path, 3, 4, CK.Path1DEffect.Morph); // $ExpectType PathEffect | null 648 const matr = CK.Matrix.scaled(3, 2); 649 const pe6 = CK.PathEffect.MakePath2D(matr, path); // $ExpectType PathEffect | null 650 const pe7 = CK.PathEffect.MakeLine2D(3.2, matr); // $ExpectType PathEffect | null 651} 652 653function mallocTests(CK: CanvasKit) { 654 const mFoo = CK.Malloc(Float32Array, 5); 655 const mArray = mFoo.toTypedArray(); // $ExpectType TypedArray 656 mArray[3] = 1.7; 657 const mSubArray = mFoo.subarray(0, 2); // $ExpectType TypedArray 658 mSubArray[0] = 2; 659 CK.Free(mFoo); 660} 661 662function maskFilterTests(CK: CanvasKit) { 663 const mf = CK.MaskFilter.MakeBlur(CK.BlurStyle.Solid, 8, false); // $ExpectType MaskFilter 664} 665 666function matrixTests(CK: CanvasKit) { 667 const m33 = CK.Matrix; // less typing 668 const matrA = m33.identity(); // $ExpectType number[] 669 const matrB = m33.rotated(0.1); // $ExpectType number[] 670 const matrC = m33.rotated(0.1, 15, 20); // $ExpectType number[] 671 const matrD = m33.multiply(matrA, matrB); // $ExpectType number[] 672 const matrE = m33.multiply(matrA, matrB, matrC, matrB, matrA); // $ExpectType number[] 673 const matrF = m33.scaled(1, 2); // $ExpectType number[] 674 const matrG = m33.scaled(1, 2, 3, 4); // $ExpectType number[] 675 const matrH = m33.skewed(1, 2); // $ExpectType number[] 676 const matrI = m33.skewed(1, 2, 3, 4); // $ExpectType number[] 677 const matrJ = m33.translated(1, 2); // $ExpectType number[] 678 const matrK = m33.invert(matrJ); 679 680 const m44 = CK.M44; 681 const matr1 = m44.identity(); // $ExpectType number[] 682 const matr2 = m44.invert(matr1); 683 const matr3 = m44.lookat([1, 2, 3], [4, 5, 6], [7, 8, 9]); // $ExpectType number[] 684 const matr4 = m44.multiply(matr1, matr3); // $ExpectType number[] 685 const matr5 = m44.mustInvert(matr1); // $ExpectType number[] 686 const matr6 = m44.perspective(1, 8, 0.4); // $ExpectType number[] 687 const matr7 = m44.rc(matr6, 0, 3); // $ExpectType number 688 const matr8 = m44.rotated([2, 3, 4], -0.4); // $ExpectType number[] 689 const matr9 = m44.rotatedUnitSinCos([4, 3, 2], 0.9, 0.1); // $ExpectType number[] 690 const matr10 = m44.scaled([5, 5, 5]); // $ExpectType number[] 691 const matr11 = m44.setupCamera(CK.LTRBRect(1, 2, 3, 4), 0.4, { 692 eye: [0, 0, 1], 693 coa: [0, 0, 0], 694 up: [0, 1, 0], 695 near: 0.2, 696 far: 4, 697 angle: Math.PI / 12, 698 }); 699 const matr12 = m44.translated([3, 2, 1]); // $ExpectType number[] 700 const matr13 = m44.transpose([4, 5, 8]); // $ExpectType number[] 701} 702 703function pictureTests(CK: CanvasKit) { 704 const recorder = new CK.PictureRecorder(); // $ExpectType PictureRecorder 705 const canvas = recorder.beginRecording(CK.LTRBRect(0, 0, 100, 100)); // $ExpectType Canvas 706 const pic = recorder.finishRecordingAsPicture(); // $ExpectType SkPicture 707 const bytes = pic.serialize(); // $ExpectType Uint8Array | null 708 const cullRect = pic.cullRect(); // $ExpectType Float32Array 709 const approxBytesUsed = pic.approximateBytesUsed(); // $ExpectType number 710 const pic2 = CK.MakePicture(bytes!); 711 const shader1 = pic2!.makeShader(CK.TileMode.Clamp, CK.TileMode.Decal, CK.FilterMode.Nearest); 712 const shader2 = pic2!.makeShader(CK.TileMode.Clamp, CK.TileMode.Decal, CK.FilterMode.Nearest, 713 CK.Matrix.rotated(3)); 714 const shader3 = pic2!.makeShader(CK.TileMode.Clamp, CK.TileMode.Decal, CK.FilterMode.Nearest, 715 CK.Matrix.skewed(2, 1), CK.LTRBRect(3, 4, 5, 6)); 716} 717 718function rectangleTests(CK: CanvasKit) { 719 const rectOne = CK.LTRBRect(5, 10, 20, 30); // $ExpectType Float32Array 720 const rectTwo = CK.XYWHRect(5, 10, 15, 20); // $ExpectType Float32Array 721 const iRectOne = CK.LTRBiRect(105, 110, 120, 130); // $ExpectType Int32Array 722 const iRectTwo = CK.XYWHiRect(105, 110, 15, 20); // $ExpectType Int32Array 723 const rrectOne = CK.RRectXY(rectOne, 3, 7); // $ExpectType Float32Array 724} 725 726function runtimeEffectTests(CK: CanvasKit) { 727 const rt = CK.RuntimeEffect.Make('not real sksl code'); // $ExpectType RuntimeEffect | null 728 if (!rt) return; 729 const rt2 = CK.RuntimeEffect.Make('not real sksl code', (err) => { 730 console.log(err); 731 }); 732 const someMatr = CK.Matrix.translated(2, 60); 733 const s1 = rt.makeShader([0, 1]); // $ExpectType Shader 734 const s2 = rt.makeShader([0, 1], someMatr); // $ExpectType Shader 735 const s3 = rt.makeShaderWithChildren([4, 5], [s1, s2]); // $ExpectType Shader 736 const s4 = rt.makeShaderWithChildren([4, 5], [s1, s2], someMatr); // $ExpectType Shader 737 const a = rt.getUniform(1); // $ExpectType SkSLUniform 738 const b = rt.getUniformCount(); // $ExpectType number 739 const c = rt.getUniformFloatCount(); // $ExpectType number 740 const d = rt.getUniformName(3); // $ExpectType string 741} 742 743function skottieTests(CK: CanvasKit, canvas?: Canvas) { 744 if (!canvas) return; 745 746 const anim = CK.MakeAnimation('some json'); // $ExpectType SkottieAnimation 747 const a = anim.duration(); // $ExpectType number 748 const b = anim.fps(); // $ExpectType number 749 const c = anim.version(); // $ExpectType string 750 const d = anim.size(); // $ExpectType Float32Array 751 anim.size(d); 752 const rect = anim.seek(0.5); 753 anim.seek(0.6, rect); 754 const rect2 = anim.seekFrame(12.3); 755 anim.seekFrame(12.3, rect2); 756 anim.render(canvas); 757 anim.render(canvas, rect); 758 759 const buff = new ArrayBuffer(10); 760 const mAnim = CK.MakeManagedAnimation('other json', { // $ExpectType ManagedSkottieAnimation 761 'flightAnim.gif': buff, 762 }); 763 const textProp = new CK.SlottableTextProperty({ // $ExpectType SlottableTextProperty 764 fillColor: CK.Color(48, 37, 199), 765 strokeColor: CK.Color(0, 100, 100) 766 }); 767 mAnim.setColor('slider', CK.WHITE); 768 mAnim.setOpacity('slider', 0.8); 769 const e = mAnim.getMarkers(); // $ExpectType AnimationMarker[] 770 const f = mAnim.getColorProps(); // $ExpectType ColorProperty[] 771 const g = mAnim.getOpacityProps(); // $ExpectType OpacityProperty[] 772 const h = mAnim.getTextProps(); // $ExpectType TextProperty[] 773 774 const i = mAnim.setColor('foo', CK.RED); // $ExpectType boolean 775 const j = mAnim.setOpacity('foo', 0.5); // $ExpectType boolean 776 const k = mAnim.setText('foo', 'bar', 12); // $ExpectType boolean 777 const l = mAnim.setTransform('foo', [1, 2], [3, 4], [5, 6], 90, 1, 0); // $ExpectType boolean 778 779 const m = mAnim.setColorSlot('foo', CK.BLUE); // $ExpectType boolean 780 const n = mAnim.setScalarSlot('foo', 5); // $ExpectType boolean 781 const o = mAnim.setVec2Slot('foo', [1, 2]); // $ExpectType boolean 782 const p = mAnim.setImageSlot('foo', 'bar'); // $ExpectType boolean 783 const q = mAnim.setTextSlot('foo', textProp); // $ExpectType boolean 784 785 const r = mAnim.getColorSlot('foo'); // $ExpectType Float32Array | null 786 const s = mAnim.getScalarSlot('foo'); // $ExpectType number | null 787 const t = mAnim.getVec2Slot('foo'); // $ExpectType Float32Array | null 788 const u = mAnim.getTextSlot('foo'); // $ExpectType SlottableTextProperty | null 789 790 const v = mAnim.getSlotInfo(); // $ExpectType SlotInfo 791} 792 793function shaderTests(CK: CanvasKit) { 794 const s1 = CK.Shader.MakeColor([0.8, 0.2, 0.5, 0.9], // $ExpectType Shader 795 CK.ColorSpace.SRGB); 796 const s2 = CK.Shader.MakeBlend(CK.BlendMode.Src, s1, s1); // $ExpectType Shader 797 const s4 = CK.Shader.MakeLinearGradient(// $ExpectType Shader 798 [0, 0], [50, 100], 799 Float32Array.of( 800 0, 1, 0, 0.8, 801 1, 0, 0, 1, 802 0, 0, 1, 0.5, 803 ), 804 [0, 0.65, 1.0], 805 CK.TileMode.Mirror 806 ); 807 const s5 = CK.Shader.MakeLinearGradient(// $ExpectType Shader 808 [0, 0], [50, 100], 809 Float32Array.of( 810 0, 1, 0, 0.8, 811 1, 0, 0, 1, 812 0, 0, 1, 0.5, 813 ), 814 null, 815 CK.TileMode.Clamp, 816 CK.Matrix.rotated(Math.PI / 4, 0, 100), 817 1, 818 CK.ColorSpace.SRGB, 819 ); 820 const s6 = CK.Shader.MakeRadialGradient(// $ExpectType Shader 821 [0, 0], 50, 822 Float32Array.of( 823 0, 1, 0, 0.8, 824 1, 0, 0, 1, 825 0, 0, 1, 0.5, 826 ), 827 [0, 0.65, 1.0], 828 CK.TileMode.Decal, 829 ); 830 const s7 = CK.Shader.MakeRadialGradient(// $ExpectType Shader 831 [0, 0], 50, 832 Float32Array.of( 833 0, 1, 0, 0.8, 834 1, 0, 0, 1, 835 0, 0, 1, 0.5, 836 ), 837 null, 838 CK.TileMode.Clamp, 839 CK.Matrix.skewed(3, -3), 840 1, 841 CK.ColorSpace.SRGB, 842 ); 843 const s8 = CK.Shader.MakeTwoPointConicalGradient(// $ExpectType Shader 844 [0, 0], 20, 845 [50, 100], 60, 846 Float32Array.of( 847 0, 1, 0, 0.8, 848 1, 0, 0, 1, 849 0, 0, 1, 0.5, 850 ), 851 [0, 0.65, 1.0], 852 CK.TileMode.Mirror 853 ); 854 const s9 = CK.Shader.MakeTwoPointConicalGradient(// $ExpectType Shader 855 [0, 0], 20, 856 [50, 100], 60, 857 Float32Array.of( 858 0, 1, 0, 0.8, 859 1, 0, 0, 1, 860 0, 0, 1, 0.5, 861 ), 862 [0, 0.65, 1.0], 863 CK.TileMode.Mirror, 864 CK.Matrix.rotated(Math.PI / 4, 0, 100), 865 1, 866 CK.ColorSpace.SRGB, 867 ); 868 const s10 = CK.Shader.MakeSweepGradient(// $ExpectType Shader 869 0, 20, 870 Float32Array.of( 871 0, 1, 0, 0.8, 872 1, 0, 0, 1, 873 0, 0, 1, 0.5, 874 ), 875 [0, 0.65, 1.0], 876 CK.TileMode.Mirror 877 ); 878 const s11 = CK.Shader.MakeSweepGradient(// $ExpectType Shader 879 0, 20, 880 Float32Array.of( 881 0, 1, 0, 0.8, 882 1, 0, 0, 1, 883 0, 0, 1, 0.5, 884 ), 885 null, 886 CK.TileMode.Mirror, 887 CK.Matrix.rotated(Math.PI / 4, 0, 100), 888 1, 889 15, 275, // start, end angle in degrees. 890 CK.ColorSpace.SRGB, 891 ); 892 const s12 = CK.Shader.MakeFractalNoise(0.1, 0.05, 2, 0, 80, 80); // $ExpectType Shader 893 const s13 = CK.Shader.MakeTurbulence(0.1, 0.05, 2, 0, 80, 80); // $ExpectType Shader 894} 895 896function surfaceTests(CK: CanvasKit, gl?: WebGLRenderingContext) { 897 if (!gl) { 898 return; 899 } 900 const canvasEl = document.querySelector('canvas') as HTMLCanvasElement; 901 const surfaceOne = CK.MakeCanvasSurface(canvasEl)!; // $ExpectType Surface 902 const surfaceTwo = CK.MakeCanvasSurface('my_canvas')!; 903 const surfaceThree = CK.MakeSWCanvasSurface(canvasEl)!; // $ExpectType Surface 904 const surfaceFour = CK.MakeSWCanvasSurface('my_canvas')!; 905 const surfaceFive = CK.MakeWebGLCanvasSurface(canvasEl, // $ExpectType Surface 906 CK.ColorSpace.SRGB, { 907 majorVersion: 2, 908 preferLowPowerToHighPerformance: 1, 909 })!; 910 const surfaceSix = CK.MakeWebGLCanvasSurface('my_canvas', CK.ColorSpace.DISPLAY_P3, { 911 enableExtensionsByDefault: 2, 912 })!; 913 const surfaceSeven = CK.MakeSurface(200, 200)!; // $ExpectType Surface 914 const m = CK.Malloc(Uint8Array, 5 * 5 * 4); 915 const surfaceEight = CK.MakeRasterDirectSurface({ 916 width: 5, 917 height: 5, 918 colorType: CK.ColorType.RGBA_8888, 919 alphaType: CK.AlphaType.Premul, 920 colorSpace: CK.ColorSpace.SRGB, 921 }, m, 20); 922 923 surfaceOne.flush(); 924 const canvas = surfaceTwo.getCanvas(); // $ExpectType Canvas 925 const ii = surfaceThree.imageInfo(); // $ExpectType ImageInfo 926 const h = surfaceFour.height(); // $ExpectType number 927 const w = surfaceFive.width(); // $ExpectType number 928 const subsurface = surfaceOne.makeSurface(ii); // $ExpectType Surface 929 const isGPU = subsurface.reportBackendTypeIsGPU(); // $ExpectType boolean 930 const count = surfaceThree.sampleCnt(); // $ExpectType number 931 const img = surfaceFour.makeImageSnapshot([0, 3, 2, 5]); // $ExpectType Image 932 const img2 = surfaceSix.makeImageSnapshot(); // $ExpectType Image 933 const img3 = surfaceFour.makeImageFromTexture(gl.createTexture()!, { 934 height: 40, 935 width: 80, 936 colorType: CK.ColorType.RGBA_8888, 937 alphaType: CK.AlphaType.Unpremul, 938 colorSpace: CK.ColorSpace.SRGB, 939 }); 940 const img4 = surfaceFour.makeImageFromTextureSource(new Image()); // $ExpectType Image | null 941 const videoEle = document.createElement('video'); 942 const img5 = surfaceFour.makeImageFromTextureSource(videoEle, { 943 height: 40, 944 width: 80, 945 colorType: CK.ColorType.RGBA_8888, 946 alphaType: CK.AlphaType.Unpremul, 947 }); 948 const img6 = surfaceFour.makeImageFromTextureSource(new ImageData(40, 80)); // $ExpectType Image | null 949 const img7 = surfaceFour.makeImageFromTextureSource(videoEle, { 950 height: 40, 951 width: 80, 952 colorType: CK.ColorType.RGBA_8888, 953 alphaType: CK.AlphaType.Premul, 954 }, true); 955 surfaceSeven.delete(); 956 957 const ctx = CK.GetWebGLContext(canvasEl); // $ExpectType number 958 CK.deleteContext(ctx); 959 const grCtx = CK.MakeGrContext(ctx); 960 const surfaceNine = CK.MakeOnScreenGLSurface(grCtx!, 100, 400, // $ExpectType Surface 961 CK.ColorSpace.ADOBE_RGB)!; 962 963 const sample = gl.getParameter(gl.SAMPLES); 964 const stencil = gl.getParameter(gl.STENCIL_BITS); 965 const surfaceTen = CK.MakeOnScreenGLSurface(grCtx!, 100, 400, // $ExpectType Surface 966 CK.ColorSpace.ADOBE_RGB, sample, stencil)!; 967 968 const rt = CK.MakeRenderTarget(grCtx!, 100, 200); // $ExpectType Surface | null 969 const rt2 = CK.MakeRenderTarget(grCtx!, { // $ExpectType Surface | null 970 width: 79, 971 height: 205, 972 colorType: CK.ColorType.RGBA_8888, 973 alphaType: CK.AlphaType.Premul, 974 colorSpace: CK.ColorSpace.SRGB, 975 }); 976 977 const drawFrame = (canvas: Canvas) => { 978 canvas.clear([0, 0, 0, 0]); 979 }; 980 surfaceFour.requestAnimationFrame(drawFrame); 981 surfaceFour.drawOnce(drawFrame); 982 983 surfaceFour.updateTextureFromSource(img5!, videoEle); 984 surfaceFour.updateTextureFromSource(img5!, videoEle, true); 985} 986 987function textBlobTests(CK: CanvasKit, font?: Font, path?: Path) { 988 if (!font || !path) return; 989 const tb = CK.TextBlob; // less typing 990 const ids = font.getGlyphIDs('abc'); 991 const mXforms = CK.Malloc(Float32Array, ids.length * 4); 992 993 const blob = tb.MakeFromGlyphs([5, 6, 7, 8], font); // $ExpectType TextBlob 994 const blob1 = tb.MakeFromGlyphs(ids, font); // $ExpectType TextBlob 995 const blob2 = tb.MakeFromRSXform('cdf', mXforms, font); // $ExpectType TextBlob 996 const blob3 = tb.MakeFromRSXform('c', [-1, 0, 2, 3], font); // $ExpectType TextBlob 997 const blob4 = tb.MakeFromRSXformGlyphs([3, 6], mXforms, font); // $ExpectType TextBlob 998 const blob5 = tb.MakeFromRSXformGlyphs(ids, [-1, 0, 2, 3], font); // $ExpectType TextBlob 999 const blob6 = tb.MakeFromText('xyz', font); // $ExpectType TextBlob 1000 const blob7 = tb.MakeOnPath('tuv', path, font); // $ExpectType TextBlob 1001 const blob8 = tb.MakeOnPath('tuv', path, font, 10); // $ExpectType TextBlob 1002} 1003 1004function typefaceTests(CK: CanvasKit) { 1005 const face = CK.Typeface.MakeTypefaceFromData(new ArrayBuffer(10)); 1006 const face2 = CK.Typeface.GetDefault(); // $ExpectType Typeface | null 1007 const ids = face!.getGlyphIDs('abcd'); 1008 face!.getGlyphIDs('efgh', 4, ids); 1009} 1010 1011function vectorTests(CK: CanvasKit) { 1012 const a = [1, 2, 3]; 1013 const b = [4, 5, 6]; 1014 1015 const vec = CK.Vector; // less typing 1016 const v1 = vec.add(a, b); // $ExpectType VectorN 1017 const v2 = vec.cross(a, b); // $ExpectType Vector3 1018 const n1 = vec.dist(a, b); // $ExpectType number 1019 const n2 = vec.dot(a, b); // $ExpectType number 1020 const n3 = vec.length(a); // $ExpectType number 1021 const n4 = vec.lengthSquared(a); // $ExpectType number 1022 const v3 = vec.mulScalar(a, 10); // $ExpectType VectorN 1023 const v4 = vec.normalize(a); // $ExpectType VectorN 1024 const v5 = vec.sub(a, b); // $ExpectType VectorN 1025} 1026 1027function verticesTests(CK: CanvasKit) { 1028 const points = [ 1029 70, 170, 40, 90, 130, 150, 100, 50, 1030 225, 150, 225, 60, 310, 180, 330, 100, 1031 ]; 1032 const textureCoordinates = [ 1033 0, 240, 0, 0, 80, 240, 80, 0, 1034 160, 240, 160, 0, 240, 240, 240, 0, 1035 ]; 1036 const vertices = CK.MakeVertices(CK.VertexMode.TrianglesStrip, // $ExpectType Vertices 1037 points, textureCoordinates); 1038 1039 const points2 = new Float32Array(points); 1040 // 1d float color array 1041 const colors = Float32Array.of( 1042 1, 0, 0, 1, // red 1043 0, 1, 0, 1, // green 1044 0, 0, 1, 1, // blue 1045 1, 0, 1, 1); // purple 1046 const vertices2 = CK.MakeVertices(CK.VertexMode.TriangleFan, 1047 points2, null, colors, null, true); 1048 1049 const rect = vertices.bounds(); // $ExpectType Float32Array 1050 vertices.bounds(rect); 1051 const id = vertices.uniqueID(); // $ExpectType number 1052} 1053 1054function webGPUTest(CK: CanvasKit, device?: GPUDevice, canvas?: HTMLCanvasElement, texture?: GPUTexture) { 1055 if (!device || !canvas || !texture) { 1056 return; 1057 } 1058 1059 const gpuContext: WebGPUDeviceContext = CK.MakeGPUDeviceContext(device)!; // $ExpectType GrDirectContext 1060 1061 // Texture surface. 1062 const surface1 = CK.MakeGPUTextureSurface(gpuContext, texture, 800, 600, // $ExpectType Surface | null 1063 CK.ColorSpace.SRGB); 1064 1065 // Canvas surfaces. 1066 const canvasContext = CK.MakeGPUCanvasContext(gpuContext, canvas, { // $ExpectType WebGPUCanvasContext 1067 format: "bgra8unorm", 1068 alphaMode: "premultiplied", 1069 })!; 1070 canvasContext.requestAnimationFrame((canvas: Canvas) => { 1071 canvas.clear([0, 0, 0, 0]); 1072 }); 1073 1074 const surface2 = CK.MakeGPUCanvasSurface(canvasContext, CK.ColorSpace.SRGB); // $ExpectType Surface | null 1075 const surface3 = CK.MakeGPUCanvasSurface(canvasContext, CK.ColorSpace.SRGB, 10, 10); // $ExpectType Surface | null 1076} 1077