Spaces:

liewchooichin
/

homepage

Running

App Files Files Community

liewchooichin commited on May 29

Commit

4840bff

•

1 Parent(s): b884914

Upload 4 files

Browse files

Files changed (4) hide show

draw-web-worker/index.html +63 -0
draw-web-worker/main.js +56 -0
draw-web-worker/style.css +40 -0
draw-web-worker/worker.js +56 -0

draw-web-worker/index.html ADDED Viewed

	@@ -0,0 +1,63 @@

+<!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>
+    <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>

draw-web-worker/main.js ADDED Viewed

	@@ -0,0 +1,56 @@

+/**
+ * Main script to call the worker.
+ * The canvas will be transferred to the Worker.
+ * The main script will pass the color and shape to the worker.
+ * The worker will then draw the shape with the color.
+ */
+const color = document.querySelector("#color");
+const shape = document.querySelector("#shape");
+// Use getElementById: No need to append the # in front of the id
+const drawingArea = document.getElementById("drawingArea");
+// offscreen canvas for worker
+const offscreen = drawingArea.transferControlToOffscreen();
+// Check if the window has Worker.
+if (window.Worker) {
+    const worker = new Worker("./worker.js");
+    // transfer the offscreen to the worker
+    let messageToWorker = {
+        command: "getOffscreen",
+        canvas: offscreen
+    }
+    // The [] array buffer must be transferred to the Worker.
+    worker.postMessage(messageToWorker, [offscreen]);
+    worker.addEventListener("message", messageFromWorker);
+    // get the color and shape to draw
+    color.addEventListener("change", drawShape);
+    shape.addEventListener("change", drawShape);
+    // process message from worker
+    function messageFromWorker(message) {
+        console.log("Main: Message received from worker");
+        // get the status of work
+        if(message.data.status) {
+            console.log(`Main: Message from worker: ${message.data.result}`);
+        }
+        else {
+            console.log(`Main: Worker cannot complete the status for some reason.`)
+        }
+    }
+    // event listener to draw a shape
+    function drawShape(event) {
+        const drawData = {
+            command: "draw",
+            selectedColor: color.value.toLowerCase(),
+            selectedShape: shape.value.toLowerCase(),
+        }
+        worker.postMessage(drawData);
+        worker.addEventListener("message", messageFromWorker);
+    }
+} else {
+    console.log('Your browser doesn\'t support web workers.');
+}

draw-web-worker/style.css ADDED Viewed

	@@ -0,0 +1,40 @@

+/* Basic stylesheet */
+* {
+    box-sizing: border-box;
+}
+html {
+    font-family: Verdana, sans-serif;
+    font-size: 12pt;
+}
+footer {
+    border-top: 1px solid lightgrey;
+    font-size: 10pt;
+}
+body {
+    width: 100%;
+}
+/* Slightly highlight the code */
+code {
+    background-color: lightgrey;
+}
+/* choose all the children from form */
+form > * {
+    margin: 0.5em 0;
+}
+/* canvas */
+canvas#drawingArea {
+    margin: 0.5em 1.5em;
+    width: 80%;
+    height: 60%;
+    /*border: 1px solid black;*/
+}

draw-web-worker/worker.js ADDED Viewed

	@@ -0,0 +1,56 @@

+/**
+ * First, the Worker will get the offscreenCanvas.
+ * On changes to selection, Worker will take the color and shape
+ * and draw on the canvas.
+ */
+let offscreenCanvas;
+let ctx;
+let workStatus = {
+    status: false,
+    result: ""
+};
+// The message will be handled in this function.
+onmessage = drawShape;
+function drawShape(message) {
+    console.log('Worker: Message received from main script');
+    console.log(`Worker: command ${message.data.command}`)
+    // get the offscreen canvas
+    if(message.data.command==="getOffscreen") {
+        offscreenCanvas = message.data.canvas;
+        ctx = offscreenCanvas.getContext("2d");
+        console.log(`Worker: canvas (w x h): (${offscreenCanvas.width}, ${offscreenCanvas.height}).`);
+        // return a message to indicate the offscreen is successful
+        workStatus.status = true;
+        workStatus.result = "Worker: Got the offscreen canvas.";
+        postMessage(workStatus);
+    }
+    // get the color and shape
+    if(message.data.command==="draw") {
+        const color = message.data.selectedColor;
+        const shape = message.data.selectedShape;
+        console.log(`Worker: Receive order to draw a ${color} ${shape}.`);
+        // draw now
+        // clear the canvas first
+        ctx.clearRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
+        ctx.fillStyle = color;
+        switch(shape) {
+            case "square":
+                ctx.fillRect(x=0, y=0, w=100, h=100);
+                break;
+            case "rect":
+                ctx.fillRect(x=0, y=0, w=100, h=60);
+                break;
+            case "circle":
+                ctx.beginPath();
+                ctx.arc(x=60, y=60, radius=50,
+                        startAngle=0, endAngle=2*Math.PI);
+                ctx.fill();
+                break;
+        }
+        // return a message to indicate it has finished drawing
+        workStatus.status = true;
+        workStatus.result = "Worker: Finish drawing the shape.";
+        postMessage(workStatus);
+    }
+}