1describe('Canvas 2D emulation', () => { 2 let container; 3 4 beforeEach(async () => { 5 await EverythingLoaded; 6 container = document.createElement('div'); 7 container.innerHTML = ` 8 <canvas width=600 height=600 id=test></canvas> 9 <canvas width=600 height=600 id=report></canvas>`; 10 document.body.appendChild(container); 11 }); 12 13 afterEach(() => { 14 document.body.removeChild(container); 15 }); 16 17 const expectColorCloseTo = (a, b) => { 18 expect(a.length).toEqual(4); 19 expect(b.length).toEqual(4); 20 for (let i=0; i<4; i++) { 21 expect(a[i]).toBeCloseTo(b[i], 3); 22 } 23 } 24 25 describe('color strings', () => { 26 const hex = (s) => { 27 return parseInt(s, 16); 28 } 29 30 it('parses hex color strings', () => { 31 const parseColor = CanvasKit.parseColorString; 32 expectColorCloseTo(parseColor('#FED'), 33 CanvasKit.Color(hex('FF'), hex('EE'), hex('DD'), 1)); 34 expectColorCloseTo(parseColor('#FEDC'), 35 CanvasKit.Color(hex('FF'), hex('EE'), hex('DD'), hex('CC')/255)); 36 expectColorCloseTo(parseColor('#fed'), 37 CanvasKit.Color(hex('FF'), hex('EE'), hex('DD'), 1)); 38 expectColorCloseTo(parseColor('#fedc'), 39 CanvasKit.Color(hex('FF'), hex('EE'), hex('DD'), hex('CC')/255)); 40 }); 41 it('parses rgba color strings', () => { 42 const parseColor = CanvasKit.parseColorString; 43 expectColorCloseTo(parseColor('rgba(117, 33, 64, 0.75)'), 44 CanvasKit.Color(117, 33, 64, 0.75)); 45 expectColorCloseTo(parseColor('rgb(117, 33, 64, 0.75)'), 46 CanvasKit.Color(117, 33, 64, 0.75)); 47 expectColorCloseTo(parseColor('rgba(117,33,64)'), 48 CanvasKit.Color(117, 33, 64, 1.0)); 49 expectColorCloseTo(parseColor('rgb(117,33, 64)'), 50 CanvasKit.Color(117, 33, 64, 1.0)); 51 expectColorCloseTo(parseColor('rgb(117,33, 64, 32%)'), 52 CanvasKit.Color(117, 33, 64, 0.32)); 53 expectColorCloseTo(parseColor('rgb(117,33, 64, 0.001)'), 54 CanvasKit.Color(117, 33, 64, 0.001)); 55 expectColorCloseTo(parseColor('rgb(117,33,64,0)'), 56 CanvasKit.Color(117, 33, 64, 0.0)); 57 }); 58 it('parses named color strings', () => { 59 // Keep this one as the _testing version, because we don't include the large 60 // color map by default. 61 const parseColor = CanvasKit._testing.parseColor; 62 expectColorCloseTo(parseColor('grey'), 63 CanvasKit.Color(128, 128, 128, 1.0)); 64 expectColorCloseTo(parseColor('blanchedalmond'), 65 CanvasKit.Color(255, 235, 205, 1.0)); 66 expectColorCloseTo(parseColor('transparent'), 67 CanvasKit.Color(0, 0, 0, 0)); 68 }); 69 70 it('properly produces color strings', () => { 71 const colorToString = CanvasKit._testing.colorToString; 72 73 expect(colorToString(CanvasKit.Color(102, 51, 153, 1.0))).toEqual('#663399'); 74 75 expect(colorToString(CanvasKit.Color(255, 235, 205, 0.5))).toEqual( 76 'rgba(255, 235, 205, 0.50000000)'); 77 }); 78 79 it('can multiply colors by alpha', () => { 80 const multiplyByAlpha = CanvasKit.multiplyByAlpha; 81 82 const testCases = [ 83 { 84 inColor: CanvasKit.Color(102, 51, 153, 1.0), 85 inAlpha: 1.0, 86 outColor: CanvasKit.Color(102, 51, 153, 1.0), 87 }, 88 { 89 inColor: CanvasKit.Color(102, 51, 153, 1.0), 90 inAlpha: 0.8, 91 outColor: CanvasKit.Color(102, 51, 153, 0.8), 92 }, 93 { 94 inColor: CanvasKit.Color(102, 51, 153, 0.8), 95 inAlpha: 0.7, 96 outColor: CanvasKit.Color(102, 51, 153, 0.56), 97 }, 98 { 99 inColor: CanvasKit.Color(102, 51, 153, 0.8), 100 inAlpha: 1000, 101 outColor: CanvasKit.Color(102, 51, 153, 1.0), 102 }, 103 ]; 104 105 for (const tc of testCases) { 106 // Print out the test case if the two don't match. 107 expect(multiplyByAlpha(tc.inColor, tc.inAlpha)) 108 .toEqual(tc.outColor, JSON.stringify(tc)); 109 } 110 }); 111 }); // end describe('color string parsing') 112 113 describe('fonts', () => { 114 it('can parse font sizes', () => { 115 const parseFontString = CanvasKit._testing.parseFontString; 116 117 const tests = [{ 118 'input': '10px monospace', 119 'output': { 120 'style': '', 121 'variant': '', 122 'weight': '', 123 'sizePx': 10, 124 'family': 'monospace', 125 } 126 }, 127 { 128 'input': '15pt Arial', 129 'output': { 130 'style': '', 131 'variant': '', 132 'weight': '', 133 'sizePx': 20, 134 'family': 'Arial', 135 } 136 }, 137 { 138 'input': '1.5in Arial, san-serif ', 139 'output': { 140 'style': '', 141 'variant': '', 142 'weight': '', 143 'sizePx': 144, 144 'family': 'Arial, san-serif', 145 } 146 }, 147 { 148 'input': '1.5em SuperFont', 149 'output': { 150 'style': '', 151 'variant': '', 152 'weight': '', 153 'sizePx': 24, 154 'family': 'SuperFont', 155 } 156 }, 157 ]; 158 159 for (let i = 0; i < tests.length; i++) { 160 expect(parseFontString(tests[i].input)).toEqual(tests[i].output); 161 } 162 }); 163 164 it('can parse font attributes', () => { 165 const parseFontString = CanvasKit._testing.parseFontString; 166 167 const tests = [{ 168 'input': 'bold 10px monospace', 169 'output': { 170 'style': '', 171 'variant': '', 172 'weight': 'bold', 173 'sizePx': 10, 174 'family': 'monospace', 175 } 176 }, 177 { 178 'input': 'italic bold 10px monospace', 179 'output': { 180 'style': 'italic', 181 'variant': '', 182 'weight': 'bold', 183 'sizePx': 10, 184 'family': 'monospace', 185 } 186 }, 187 { 188 'input': 'italic small-caps bold 10px monospace', 189 'output': { 190 'style': 'italic', 191 'variant': 'small-caps', 192 'weight': 'bold', 193 'sizePx': 10, 194 'family': 'monospace', 195 } 196 }, 197 { 198 'input': 'small-caps bold 10px monospace', 199 'output': { 200 'style': '', 201 'variant': 'small-caps', 202 'weight': 'bold', 203 'sizePx': 10, 204 'family': 'monospace', 205 } 206 }, 207 { 208 'input': 'italic 10px monospace', 209 'output': { 210 'style': 'italic', 211 'variant': '', 212 'weight': '', 213 'sizePx': 10, 214 'family': 'monospace', 215 } 216 }, 217 { 218 'input': 'small-caps 10px monospace', 219 'output': { 220 'style': '', 221 'variant': 'small-caps', 222 'weight': '', 223 'sizePx': 10, 224 'family': 'monospace', 225 } 226 }, 227 { 228 'input': 'normal bold 10px monospace', 229 'output': { 230 'style': 'normal', 231 'variant': '', 232 'weight': 'bold', 233 'sizePx': 10, 234 'family': 'monospace', 235 } 236 }, 237 ]; 238 239 for (let i = 0; i < tests.length; i++) { 240 expect(parseFontString(tests[i].input)).toEqual(tests[i].output); 241 } 242 }); 243 }); 244 245 const multipleCanvasTest = (testname, done, test) => { 246 const skcanvas = CanvasKit.MakeCanvas(CANVAS_WIDTH, CANVAS_HEIGHT); 247 skcanvas._config = 'software_canvas'; 248 const realCanvas = document.getElementById('test'); 249 realCanvas._config = 'html_canvas'; 250 realCanvas.width = CANVAS_WIDTH; 251 realCanvas.height = CANVAS_HEIGHT; 252 253 if (!done) { 254 console.log('debugging canvaskit'); 255 test(realCanvas); 256 test(skcanvas); 257 const png = skcanvas.toDataURL(); 258 const img = document.createElement('img'); 259 document.body.appendChild(img); 260 img.src = png; 261 debugger; 262 return; 263 } 264 265 let promises = []; 266 267 for (let canvas of [skcanvas, realCanvas]) { 268 test(canvas); 269 // canvas has .toDataURL (even though skcanvas is not a real Canvas) 270 // so this will work. 271 promises.push(reportCanvas(canvas, testname, canvas._config)); 272 } 273 Promise.all(promises).then(() => { 274 skcanvas.dispose(); 275 done(); 276 }).catch(reportError(done)); 277 } 278 279 describe('CanvasContext2D API', () => { 280 multipleCanvasGM('all_line_drawing_operations', (canvas) => { 281 const ctx = canvas.getContext('2d'); 282 ctx.scale(3.0, 3.0); 283 ctx.moveTo(20, 5); 284 ctx.lineTo(30, 20); 285 ctx.lineTo(40, 10); 286 ctx.lineTo(50, 20); 287 ctx.lineTo(60, 0); 288 ctx.lineTo(20, 5); 289 290 ctx.moveTo(20, 80); 291 ctx.bezierCurveTo(90, 10, 160, 150, 190, 10); 292 293 ctx.moveTo(36, 148); 294 ctx.quadraticCurveTo(66, 188, 120, 136); 295 ctx.lineTo(36, 148); 296 297 ctx.rect(5, 170, 20, 25); 298 299 ctx.moveTo(150, 180); 300 ctx.arcTo(150, 100, 50, 200, 20); 301 ctx.lineTo(160, 160); 302 303 ctx.moveTo(20, 120); 304 ctx.arc(20, 120, 18, 0, 1.75 * Math.PI); 305 ctx.lineTo(20, 120); 306 307 ctx.moveTo(150, 5); 308 ctx.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI) 309 310 ctx.lineWidth = 2; 311 ctx.stroke(); 312 313 // Test edgecases and draw direction 314 ctx.beginPath(); 315 ctx.arc(50, 100, 10, Math.PI, -Math.PI/2); 316 ctx.stroke(); 317 ctx.beginPath(); 318 ctx.arc(75, 100, 10, Math.PI, -Math.PI/2, true); 319 ctx.stroke(); 320 ctx.beginPath(); 321 ctx.arc(100, 100, 10, Math.PI, 100.1 * Math.PI, true); 322 ctx.stroke(); 323 ctx.beginPath(); 324 ctx.arc(125, 100, 10, Math.PI, 100.1 * Math.PI, false); 325 ctx.stroke(); 326 ctx.beginPath(); 327 ctx.ellipse(155, 100, 10, 15, Math.PI/8, 100.1 * Math.PI, Math.PI, true); 328 ctx.stroke(); 329 ctx.beginPath(); 330 ctx.ellipse(180, 100, 10, 15, Math.PI/8, Math.PI, 100.1 * Math.PI, true); 331 ctx.stroke(); 332 }); 333 334 multipleCanvasGM('all_matrix_operations', (canvas) => { 335 const ctx = canvas.getContext('2d'); 336 ctx.rect(10, 10, 20, 20); 337 338 ctx.scale(2.0, 4.0); 339 ctx.rect(30, 10, 20, 20); 340 ctx.resetTransform(); 341 342 ctx.rotate(Math.PI / 3); 343 ctx.rect(50, 10, 20, 20); 344 ctx.resetTransform(); 345 346 ctx.translate(30, -2); 347 ctx.rect(70, 10, 20, 20); 348 ctx.resetTransform(); 349 350 ctx.translate(60, 0); 351 ctx.rotate(Math.PI / 6); 352 ctx.transform(1.5, 0, 0, 0.5, 0, 0); // effectively scale 353 ctx.rect(90, 10, 20, 20); 354 ctx.resetTransform(); 355 356 ctx.save(); 357 ctx.setTransform(2, 0, -.5, 2.5, -40, 120); 358 ctx.rect(110, 10, 20, 20); 359 ctx.lineTo(110, 0); 360 ctx.restore(); 361 ctx.lineTo(220, 120); 362 363 ctx.scale(3.0, 3.0); 364 ctx.font = '6pt Noto Mono'; 365 ctx.fillText('This text should be huge', 10, 80); 366 ctx.resetTransform(); 367 368 ctx.strokeStyle = 'black'; 369 ctx.lineWidth = 2; 370 ctx.stroke(); 371 372 ctx.beginPath(); 373 ctx.moveTo(250, 30); 374 ctx.lineTo(250, 80); 375 ctx.scale(3.0, 3.0); 376 ctx.lineTo(280/3, 90/3); 377 ctx.closePath(); 378 ctx.strokeStyle = 'black'; 379 ctx.lineWidth = 5; 380 ctx.stroke(); 381 }); 382 383 multipleCanvasGM('shadows_and_save_restore', (canvas) => { 384 const ctx = canvas.getContext('2d'); 385 ctx.strokeStyle = '#000'; 386 ctx.fillStyle = '#CCC'; 387 ctx.shadowColor = 'rebeccapurple'; 388 ctx.shadowBlur = 1; 389 ctx.shadowOffsetX = 3; 390 ctx.shadowOffsetY = -8; 391 ctx.rect(10, 10, 30, 30); 392 393 ctx.save(); 394 ctx.strokeStyle = '#C00'; 395 ctx.fillStyle = '#00C'; 396 ctx.shadowBlur = 0; 397 ctx.shadowColor = 'transparent'; 398 399 ctx.stroke(); 400 401 ctx.restore(); 402 ctx.fill(); 403 404 ctx.beginPath(); 405 ctx.moveTo(36, 148); 406 ctx.quadraticCurveTo(66, 188, 120, 136); 407 ctx.closePath(); 408 ctx.stroke(); 409 410 ctx.beginPath(); 411 ctx.shadowColor = '#993366AA'; 412 ctx.shadowOffsetX = 8; 413 ctx.shadowBlur = 5; 414 ctx.setTransform(2, 0, -.5, 2.5, -40, 120); 415 ctx.rect(110, 10, 20, 20); 416 ctx.lineTo(110, 0); 417 ctx.resetTransform(); 418 ctx.lineTo(220, 120); 419 ctx.stroke(); 420 421 ctx.fillStyle = 'green'; 422 ctx.font = '16pt Noto Mono'; 423 ctx.fillText('This should be shadowed', 20, 80); 424 425 ctx.beginPath(); 426 ctx.lineWidth = 6; 427 ctx.ellipse(10, 290, 30, 30, 0, 0, Math.PI * 2); 428 ctx.scale(2, 1); 429 ctx.moveTo(10, 290) 430 ctx.ellipse(10, 290, 30, 60, 0, 0, Math.PI * 2); 431 ctx.resetTransform(); 432 ctx.shadowColor = '#993366AA'; 433 ctx.scale(3, 1); 434 ctx.moveTo(10, 290) 435 ctx.ellipse(10, 290, 30, 90, 0, 0, Math.PI * 2); 436 ctx.stroke(); 437 }); 438 439 multipleCanvasGM('global_dashed_rects', (canvas) => { 440 const ctx = canvas.getContext('2d'); 441 ctx.scale(1.1, 1.1); 442 ctx.translate(10, 10); 443 // Shouldn't impact the fillRect calls 444 ctx.setLineDash([5, 3]); 445 446 ctx.fillStyle = 'rgba(200, 0, 100, 0.81)'; 447 ctx.fillRect(20, 30, 100, 100); 448 449 ctx.globalAlpha = 0.81; 450 ctx.fillStyle = 'rgba(200, 0, 100, 1.0)'; 451 ctx.fillRect(120, 30, 100, 100); 452 // This shouldn't do anything 453 ctx.globalAlpha = 0.1; 454 455 ctx.fillStyle = 'rgba(200, 0, 100, 0.9)'; 456 ctx.globalAlpha = 0.9; 457 // Intentional no-op to check ordering 458 ctx.clearRect(220, 30, 100, 100); 459 ctx.fillRect(220, 30, 100, 100); 460 461 ctx.fillRect(320, 30, 100, 100); 462 ctx.clearRect(330, 40, 80, 80); 463 464 ctx.strokeStyle = 'blue'; 465 ctx.lineWidth = 3; 466 ctx.setLineDash([5, 3]); 467 ctx.strokeRect(20, 150, 100, 100); 468 ctx.setLineDash([50, 30]); 469 ctx.strokeRect(125, 150, 100, 100); 470 ctx.lineDashOffset = 25; 471 ctx.strokeRect(230, 150, 100, 100); 472 ctx.setLineDash([2, 5, 9]); 473 ctx.strokeRect(335, 150, 100, 100); 474 475 ctx.setLineDash([5, 2]); 476 ctx.moveTo(336, 400); 477 ctx.quadraticCurveTo(366, 488, 120, 450); 478 ctx.lineTo(300, 400); 479 ctx.stroke(); 480 481 ctx.font = '36pt Noto Mono'; 482 ctx.strokeText('Dashed', 20, 350); 483 ctx.fillText('Not Dashed', 20, 400); 484 }); 485 486 multipleCanvasGM('gradients_clip', (canvas) => { 487 const ctx = canvas.getContext('2d'); 488 489 const rgradient = ctx.createRadialGradient(200, 300, 10, 100, 100, 300); 490 491 rgradient.addColorStop(0, 'red'); 492 rgradient.addColorStop(.7, 'white'); 493 rgradient.addColorStop(1, 'blue'); 494 495 ctx.fillStyle = rgradient; 496 ctx.globalAlpha = 0.7; 497 ctx.fillRect(0,0,600,600); 498 ctx.globalAlpha = 0.95; 499 500 ctx.beginPath(); 501 ctx.arc(300, 100, 90, 0, Math.PI*1.66); 502 ctx.closePath(); 503 ctx.strokeStyle = 'yellow'; 504 ctx.lineWidth = 5; 505 ctx.stroke(); 506 ctx.save(); 507 ctx.clip(); 508 509 const lgradient = ctx.createLinearGradient(200, 20, 420, 40); 510 511 lgradient.addColorStop(0, 'green'); 512 lgradient.addColorStop(.5, 'cyan'); 513 lgradient.addColorStop(1, 'orange'); 514 515 ctx.fillStyle = lgradient; 516 517 ctx.fillRect(200, 30, 200, 300); 518 519 ctx.restore(); 520 ctx.fillRect(550, 550, 40, 40); 521 }); 522 523 multipleCanvasGM('get_put_imagedata', (canvas) => { 524 const ctx = canvas.getContext('2d'); 525 // Make a gradient so we see if the pixels copying worked 526 const grad = ctx.createLinearGradient(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 527 grad.addColorStop(0, 'yellow'); 528 grad.addColorStop(1, 'red'); 529 ctx.fillStyle = grad; 530 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 531 532 const iData = ctx.getImageData(400, 100, 200, 150); 533 expect(iData.width).toBe(200); 534 expect(iData.height).toBe(150); 535 expect(iData.data.byteLength).toBe(200*150*4); 536 ctx.putImageData(iData, 10, 10); 537 ctx.putImageData(iData, 350, 350, 100, 75, 45, 40); 538 ctx.strokeRect(350, 350, 200, 150); 539 540 const box = ctx.createImageData(20, 40); 541 ctx.putImageData(box, 10, 300); 542 const biggerBox = ctx.createImageData(iData); 543 ctx.putImageData(biggerBox, 10, 350); 544 expect(biggerBox.width).toBe(iData.width); 545 expect(biggerBox.height).toBe(iData.height); 546 }); 547 548 multipleCanvasGM('shadows_with_rotate_skbug_9947', (canvas) => { 549 const ctx = canvas.getContext('2d'); 550 const angle = 240; 551 ctx.fillStyle = 'white'; 552 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 553 ctx.save(); 554 ctx.translate(80, 80); 555 ctx.rotate((angle * Math.PI) / 180); 556 ctx.shadowOffsetX = 10; 557 ctx.shadowOffsetY = 10; 558 ctx.shadowColor = 'rgba(100,100,100,0.5)'; 559 ctx.shadowBlur = 1; 560 ctx.fillStyle = 'black'; 561 ctx.strokeStyle = 'red'; 562 ctx.beginPath(); 563 ctx.rect(-20, -20, 40, 40); 564 ctx.fill(); 565 ctx.fillRect(30, 30, 40, 40); 566 ctx.strokeRect(30, -20, 40, 40); 567 ctx.fillText('text', -20, -30); 568 ctx.restore(); 569 }); 570 571 describe('using images', () => { 572 let skImageData = null; 573 let htmlImage = null; 574 const skPromise = fetch('/assets/mandrill_512.png') 575 .then((response) => response.arrayBuffer()) 576 .then((buffer) => { 577 skImageData = buffer; 578 579 }); 580 const realPromise = fetch('/assets/mandrill_512.png') 581 .then((response) => response.blob()) 582 .then((blob) => createImageBitmap(blob)) 583 .then((bitmap) => { 584 htmlImage = bitmap; 585 }); 586 587 beforeEach(async () => { 588 await skPromise; 589 await realPromise; 590 }); 591 592 multipleCanvasGM('draw_patterns', (canvas) => { 593 const ctx = canvas.getContext('2d'); 594 let img = htmlImage; 595 if (canvas._config === 'software_canvas') { 596 img = canvas.decodeImage(skImageData); 597 } 598 ctx.fillStyle = '#EEE'; 599 ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT); 600 ctx.lineWidth = 20; 601 ctx.scale(0.2, 0.4); 602 603 let pattern = ctx.createPattern(img, 'repeat'); 604 ctx.fillStyle = pattern; 605 ctx.fillRect(0, 0, 1500, 750); 606 607 pattern = ctx.createPattern(img, 'repeat-x'); 608 ctx.fillStyle = pattern; 609 ctx.fillRect(1500, 0, 3000, 750); 610 611 ctx.globalAlpha = 0.7 612 pattern = ctx.createPattern(img, 'repeat-y'); 613 ctx.fillStyle = pattern; 614 ctx.fillRect(0, 750, 1500, 1500); 615 ctx.strokeRect(0, 750, 1500, 1500); 616 617 pattern = ctx.createPattern(img, 'no-repeat'); 618 ctx.fillStyle = pattern; 619 pattern.setTransform({a: 1, b: -.1, c:.1, d: 0.5, e: 1800, f:800}); 620 ctx.fillRect(0, 0, 3000, 1500); 621 }); 622 623 multipleCanvasGM('draw_image', (canvas) => { 624 let ctx = canvas.getContext('2d'); 625 let img = htmlImage; 626 if (canvas._config === 'software_canvas') { 627 img = canvas.decodeImage(skImageData); 628 } 629 ctx.drawImage(img, 30, -200); 630 631 ctx.globalAlpha = 0.7 632 ctx.rotate(.1); 633 ctx.imageSmoothingQuality = 'medium'; 634 ctx.drawImage(img, 200, 350, 150, 100); 635 ctx.rotate(-.2); 636 ctx.imageSmoothingEnabled = false; 637 ctx.drawImage(img, 100, 150, 400, 350, 10, 400, 150, 100); 638 }); 639 }); // end describe('using images') 640 641 { 642 const drawPoint = (ctx, x, y, color) => { 643 ctx.fillStyle = color; 644 ctx.fillRect(x, y, 1, 1); 645 } 646 const IN = 'purple'; 647 const OUT = 'orange'; 648 const SCALE = 8; 649 650 // Check to see if these points are in or out on each of the 651 // test configurations. 652 const pts = [[3, 3], [4, 4], [5, 5], [10, 10], [8, 10], [6, 10], 653 [6.5, 9], [15, 10], [17, 10], [17, 11], [24, 24], 654 [25, 25], [26, 26], [27, 27]]; 655 const tests = [ 656 { 657 xOffset: 0, 658 yOffset: 0, 659 fillType: 'nonzero', 660 strokeWidth: 0, 661 testFn: (ctx, x, y) => ctx.isPointInPath(x * SCALE, y * SCALE, 'nonzero'), 662 }, 663 { 664 xOffset: 30, 665 yOffset: 0, 666 fillType: 'evenodd', 667 strokeWidth: 0, 668 testFn: (ctx, x, y) => ctx.isPointInPath(x * SCALE, y * SCALE, 'evenodd'), 669 }, 670 { 671 xOffset: 0, 672 yOffset: 30, 673 fillType: null, 674 strokeWidth: 1, 675 testFn: (ctx, x, y) => ctx.isPointInStroke(x * SCALE, y * SCALE), 676 }, 677 { 678 xOffset: 30, 679 yOffset: 30, 680 fillType: null, 681 strokeWidth: 2, 682 testFn: (ctx, x, y) => ctx.isPointInStroke(x * SCALE, y * SCALE), 683 }, 684 ]; 685 multipleCanvasGM('points_in_path_stroke', (canvas) => { 686 const ctx = canvas.getContext('2d'); 687 ctx.font = '20px Noto Mono'; 688 // Draw some visual aids 689 ctx.fillText('path-nonzero', 60, 30); 690 ctx.fillText('path-evenodd', 300, 30); 691 ctx.fillText('stroke-1px-wide', 60, 260); 692 ctx.fillText('stroke-2px-wide', 300, 260); 693 ctx.fillText('purple is IN, orange is OUT', 20, 560); 694 695 // Scale up to make single pixels easier to see 696 ctx.scale(SCALE, SCALE); 697 for (const test of tests) { 698 ctx.beginPath(); 699 const xOffset = test.xOffset; 700 const yOffset = test.yOffset; 701 702 ctx.fillStyle = '#AAA'; 703 ctx.lineWidth = test.strokeWidth; 704 ctx.rect(5+xOffset, 5+yOffset, 20, 20); 705 ctx.arc(15+xOffset, 15+yOffset, 8, 0, Math.PI*2, false); 706 if (test.fillType) { 707 ctx.fill(test.fillType); 708 } else { 709 ctx.stroke(); 710 } 711 712 for (const pt of pts) { 713 let [x, y] = pt; 714 x += xOffset; 715 y += yOffset; 716 // naively apply transform when querying because the points queried 717 // ignore the CTM. 718 if (test.testFn(ctx, x, y)) { 719 drawPoint(ctx, x, y, IN); 720 } else { 721 drawPoint(ctx, x, y, OUT); 722 } 723 } 724 } 725 }); 726 } 727 728 describe('loading custom fonts', () => { 729 const realFontLoaded = new FontFace('BungeeNonSystem', 'url(/assets/Bungee-Regular.ttf)', { 730 'family': 'BungeeNonSystem', // Make sure the canvas does not use the system font 731 'style': 'normal', 732 'weight': '400', 733 }).load().then((font) => { 734 document.fonts.add(font); 735 }); 736 737 let fontBuffer = null; 738 const skFontLoaded = fetch('/assets/Bungee-Regular.ttf').then( 739 (response) => response.arrayBuffer()).then( 740 (buffer) => { 741 fontBuffer = buffer; 742 }); 743 744 beforeEach(async () => { 745 await realFontLoaded; 746 await skFontLoaded; 747 }); 748 749 multipleCanvasGM('custom_font', (canvas) => { 750 if (canvas.loadFont) { 751 canvas.loadFont(fontBuffer, { 752 'family': 'BungeeNonSystem', 753 'style': 'normal', 754 'weight': '400', 755 }); 756 } 757 const ctx = canvas.getContext('2d'); 758 759 ctx.font = '20px monospace'; 760 ctx.fillText('20 px monospace', 10, 30); 761 762 ctx.font = '2.0em BungeeNonSystem'; 763 ctx.fillText('2.0em Bungee filled', 10, 80); 764 ctx.strokeText('2.0em Bungee stroked', 10, 130); 765 766 const m = ctx.measureText('A phrase in English'); 767 expect(m).toBeTruthy(); 768 expect(m['width']).toBeTruthy(); 769 770 ctx.font = '40pt monospace'; 771 ctx.strokeText('40pt monospace', 10, 200); 772 773 // bold wasn't defined, so should fallback to just the 400 weight 774 ctx.font = 'bold 45px BungeeNonSystem'; 775 ctx.fillText('45px Bungee filled', 10, 260); 776 }); 777 }); // describe('loading custom fonts') 778 779 it('can read default properties', () => { 780 const skcanvas = CanvasKit.MakeCanvas(CANVAS_WIDTH, CANVAS_HEIGHT); 781 const realCanvas = document.getElementById('test'); 782 realCanvas.width = CANVAS_WIDTH; 783 realCanvas.height = CANVAS_HEIGHT; 784 785 const skcontext = skcanvas.getContext('2d'); 786 const realContext = realCanvas.getContext('2d'); 787 // The skia canvas only comes with a monospace font by default 788 // Set the html canvas to be monospace too. 789 realContext.font = '10px monospace'; 790 791 const toTest = ['font', 'lineWidth', 'strokeStyle', 'lineCap', 792 'lineJoin', 'miterLimit', 'shadowOffsetY', 793 'shadowBlur', 'shadowColor', 'shadowOffsetX', 794 'globalAlpha', 'globalCompositeOperation', 795 'lineDashOffset', 'imageSmoothingEnabled', 796 'imageFilterQuality']; 797 798 // Compare all the default values of the properties of skcanvas 799 // to the default values on the properties of a real canvas. 800 for(let attr of toTest) { 801 expect(skcontext[attr]).toBe(realContext[attr], attr); 802 } 803 804 skcanvas.dispose(); 805 }); 806 }); // end describe('CanvasContext2D API') 807 808 describe('Path2D API', () => { 809 multipleCanvasGM('path2d_line_drawing_operations', (canvas) => { 810 const ctx = canvas.getContext('2d'); 811 let clock; 812 let path; 813 if (canvas.makePath2D) { 814 clock = canvas.makePath2D('M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z'); 815 path = canvas.makePath2D(); 816 } else { 817 clock = new Path2D('M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z') 818 path = new Path2D(); 819 } 820 path.moveTo(20, 5); 821 path.lineTo(30, 20); 822 path.lineTo(40, 10); 823 path.lineTo(50, 20); 824 path.lineTo(60, 0); 825 path.lineTo(20, 5); 826 827 path.moveTo(20, 80); 828 path.bezierCurveTo(90, 10, 160, 150, 190, 10); 829 830 path.moveTo(36, 148); 831 path.quadraticCurveTo(66, 188, 120, 136); 832 path.lineTo(36, 148); 833 834 path.rect(5, 170, 20, 25); 835 836 path.moveTo(150, 180); 837 path.arcTo(150, 100, 50, 200, 20); 838 path.lineTo(160, 160); 839 840 path.moveTo(20, 120); 841 path.arc(20, 120, 18, 0, 1.75 * Math.PI); 842 path.lineTo(20, 120); 843 844 path.moveTo(150, 5); 845 path.ellipse(130, 25, 30, 10, -1*Math.PI/8, Math.PI/6, 1.5*Math.PI) 846 847 ctx.lineWidth = 2; 848 ctx.scale(3.0, 3.0); 849 ctx.stroke(path); 850 ctx.stroke(clock); 851 }); 852 }); // end describe('Path2D API') 853}); 854
