1<!DOCTYPE html> 2<title>CanvasKit Path Rendering Performance Demo</title> 3<meta charset="utf-8" /> 4<meta http-equiv="X-UA-Compatible" content="IE=edge"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 7<style> 8 html, body { 9 max-width: 700px; 10 } 11 12 #result-container { 13 border: 1px dashed grey; 14 height: 500px; 15 width: 500px; 16 position: relative; 17 overflow: hidden; 18 } 19 20 canvas { 21 visibility: hidden; 22 position: absolute; 23 left: 0; 24 top: 0; 25 } 26 object { 27 visibility: hidden; 28 position: absolute; 29 height: 500px; 30 width: 500px; 31 left: 0; 32 top: 0; 33 } 34 35 th { 36 text-align: left; 37 width: 33%; 38 } 39 td { 40 padding: 12px; 41 color: #555; 42 font-style: italic; 43 height: 80px; 44 } 45 table { 46 width: 100%; 47 } 48</style> 49 50<body> 51 <h1>CanvasKit Path Rendering Performance Demo</h1> 52 <p>NOTE: this demo currently only works in chromium-based browsers, where 53 <a href="https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas#Browser_compatibility"> 54 Offscreen Canvas 55 </a> 56 is supported. 57 </p> 58 59 60 <h2>1. Choose a rendering method</h2> 61 <table> 62 <tr> 63 <th> 64 <input type="radio" id="SVG-input" name="rendermethod" checked> 65 <label for="SVG-input">SVG</label> 66 </th> 67 <th> 68 <input type="radio" id="Path2D-input" name="rendermethod"> 69 <label for="Path2D-input"> 70 <a href="https://developer.mozilla.org/en-US/docs/Web/API/Path2D">Path2D API</a> 71 </label> 72 </th> 73 <th> 74 <input type="radio" id="CanvasKit-input" name="rendermethod"> 75 <label for="CanvasKit-input">CanvasKit</label> 76 </th> 77 </tr> 78 <tr> 79 <td id="SVG-fps">Choose this rendering method to collect data on its performance...</td> 80 <td id="Path2D-fps">Choose this rendering method to collect data on its performance...</td> 81 <td id="CanvasKit-fps">Choose this rendering method to collect data on its performance...</td> 82 </tr> 83 </table> 84 85 <h2>2. View the result</h2> 86 <div id="result-container"> 87 <!-- Arbitrary svg for testing. Source: https://dev.w3.org/SVG/tools/svgweb/samples/svg-files--> 88 <object type="image/svg+xml" id="svg"> 89 Garbage pictograph 90 </object> 91 <canvas id="Path2D-canvas" height=500 width=500></canvas> 92 <canvas id="CanvasKit-canvas" height=500 width=500></canvas> 93 </div> 94</body> 95<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script> 96<script type="text/javascript" src="shared.js"></script> 97<script type="text/javascript" src="main.js"></script> 98