Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <meta name="viewport" content="initial-scale=1"> | |
| <link href="style.css" rel="stylesheet" type="text/css"> | |
| <!--link href="../favicon.svg" rel="icon" type="image/svg+sml"--> | |
| <script defer src="main.js"></script> | |
| <title>Draw simple shapes</title> | |
| </head> | |
| <body> | |
| <header> | |
| </header> | |
| <main> | |
| <p><a href="../index.html">Back to homepage</a></p> | |
| <h1>Draw some shapes with simple Web Workers API</h1> | |
| <p> | |
| To view the message between the main and the Worker, | |
| view the message using the Web Developer Tools of your | |
| browser. | |
| </p> | |
| <p> | |
| The main script will first transfer the canvas as an | |
| <code>offscreenCanvas</code> using | |
| <code>canvas.transferControlToOffscreen();</code>. | |
| After that the Worker will draw on the canvas. | |
| </p> | |
| <!-- Choose a shape and color from a selection list --> | |
| <form> | |
| <label for="shape">Choose a shape:</label> | |
| <select id="shape" name="shape"> | |
| <option value="">--Choose a shape--</option> | |
| <option value="rect">Rectangle</option> | |
| <option value="square">Square</option> | |
| <option value="circle">Circle</option> | |
| </select> | |
| <br> | |
| <label for="color">Choose a color:</label> | |
| <select id="color" name="color"> | |
| <option value="">--Choose a color</option> | |
| <option value="salmon">Pink</option> | |
| <option value="blue">Blue</option> | |
| <option value="green">Green</option> | |
| </select> | |
| <br> | |
| </form> | |
| <!-- Drawing canvas --> | |
| <canvas id="drawingArea"></canvas> | |
| </main> | |
| <footer> | |
| <p xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.org/dc/terms/"><a property="dct:title" rel="cc:attributionURL" href="http://url link to work">Title of Work</a> by <a rel="cc:attributionURL dct:creator" property="cc:attributionName" href="http://url link to my profile">Chooi Chin Liew</a> is marked with <a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC0 1.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/zero.svg?ref=chooser-v1" alt=""></a></p> | |
| </footer> | |
| </body> | |
| </html> | |