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