examples/canvas.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML & CSS Visualisation Starter</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <!-- import the webpage's stylesheet -->
    <link rel="stylesheet" href="../styles/styles.css">
    
    <!-- import the webpage's javascript file -->
    <script src="../scripts/canvasvis.js" type="module" defer></script>
  </head>  
  <body class="canvas">
    
    <section id="controls">
      <!-- <div class="toggle">
			  <p class="toggle__label" id="source-label" aria-live="assertive" aria-atomic="true">Toggle Source</p>
        <span class="toggle__option">Mic</span>
			  <button class="toggle__button" role="switch" data-toggle="mic" data-control="input" aria-pressed="false" aria-describedby="source-label">&nbsp;</button>
        <span class="toggle__option">Music</span>
		  </div> -->
      
      <button role="switch" data-control="play" data-on="false" aria-pressed="false">Play</button>
    </section>
    
    <canvas id="visual"></canvas>

  </body>
</html>