| <!DOCTYPE html> |
| <title>CanvasKit Path Rendering Performance Demo</title> |
| <meta charset="utf-8" /> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| |
| <style> |
| html, body { |
| max-width: 700px; |
| } |
| |
| #result-container { |
| border: 1px dashed grey; |
| height: 500px; |
| width: 500px; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| canvas { |
| visibility: hidden; |
| position: absolute; |
| left: 0; |
| top: 0; |
| } |
| object { |
| visibility: hidden; |
| position: absolute; |
| height: 500px; |
| width: 500px; |
| left: 0; |
| top: 0; |
| } |
| |
| th { |
| text-align: left; |
| width: 33%; |
| } |
| td { |
| padding: 12px; |
| color: #555; |
| font-style: italic; |
| height: 80px; |
| } |
| table { |
| width: 100%; |
| } |
| </style> |
| |
| <body> |
| <h1>CanvasKit Path Rendering Performance Demo</h1> |
| <p>NOTE: this demo currently only works in chromium-based browsers, where |
| <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#Browser_compatibility"> |
| Offscreen Canvas |
| </a> |
| is supported. |
| </p> |
| |
| |
| <h2>1. Choose a rendering method</h2> |
| <table> |
| <tr> |
| <th> |
| <input type="radio" id="SVG-input" name="rendermethod" checked> |
| <label for="SVG-input">SVG</label> |
| </th> |
| <th> |
| <input type="radio" id="Path2D-input" name="rendermethod"> |
| <label for="Path2D-input"> |
| <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D">Path2D API</a> |
| </label> |
| </th> |
| <th> |
| <input type="radio" id="CanvasKit-input" name="rendermethod"> |
| <label for="CanvasKit-input">CanvasKit</label> |
| </th> |
| </tr> |
| <tr> |
| <td id="SVG-fps">Choose this rendering method to collect data on its performance...</td> |
| <td id="Path2D-fps">Choose this rendering method to collect data on its performance...</td> |
| <td id="CanvasKit-fps">Choose this rendering method to collect data on its performance...</td> |
| </tr> |
| </table> |
| |
| <h2>2. View the result</h2> |
| <div id="result-container"> |
| <!-- Arbitrary svg for testing. Source: https://dev.w3.org/SVG/tools/svgweb/samples/svg-files--> |
| <object type="image/svg+xml" id="svg"> |
| Garbage pictograph |
| </object> |
| <canvas id="Path2D-canvas" height=500 width=500></canvas> |
| <canvas id="CanvasKit-canvas" height=500 width=500></canvas> |
| </div> |
| </body> |
| <script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script> |
| <script type="text/javascript" src="shared.js"></script> |
| <script type="text/javascript" src="main.js"></script> |
