10.3 Calculate Altitude Profiles with Canvas 255

Figure 10.3 CPU usage in calculations with and without web workers

10.3.1 Important Code Fragments

To compare how the script behaves with and without web workers, you can call
the program with both methods. You first need to integrate the external Java-
Script file containing the code for the worker (canvas_profile.js) into the head
of the calling website. From that point on, the onmessage function is globally
available—but more on the worker code shortly. Let’s start with the HTML code
for the program:

Calculate elevation profiles with Web Workers

Number of profiles size=2 oninput="updateProgressBars();" value=2>
Number of sections in profile
oninput="updateProgressBars();">

Start
value="with"> or
value="without"> Web Workers

Each time the content of the two input fields of the type number are changed, they
cause the function updateProgressBars() to be called. In it, the progress bar and
the placeholders for the results output are created. The two buttons with and
without start the calculation of the altitude profiles.