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