liewchooichin's picture
Update draw-web-worker/index.html
8885cb1 verified
<!DOCTYPE html>
<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>