title: Can I animate a canvas behind a button and draw pixels?
body: <p>I want to create a HTML button that will animate some 1 to 2 pixels squares. I have done the similar thing in Ruby (Ruby2D):</p>
  
  <p><a href="https://i.stack.imgur.com/lev9e.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lev9e.gif" alt="Ruby2D Sample"></a></p>
  
  <p>[<a href="https://pastebin.com/jchBtUtc" rel="nofollow noreferrer">Source Code</a>]</p>
  
  <p>Due to my lack of understanding of HTML, I have only created the button:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!Doctype HTML&gt;
  
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Button Particles&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;
   &lt;/head&gt;
  
   &lt;body style="background-color: #000"&gt;
    &lt;a&gt;&lt;img src="https://raw.githubusercontent.com/Souravgoswami/HTMLProjects/master/Project%206%20-%20Our%20Lovely%20Course%20%5BHTML%2C%20CSS%2C%20JQuery%2C%20Bootstrap%5D/assets/img/down-arrow.svg?sanitize=true" class="centre-img" width="100px" height="100px"&gt;&lt;/a&gt;
  
    &lt;script&gt;
     // Position elements of class centre-img to centre of the screen
     var centreElements = document.getElementsByClassName('centre-img')
     for (let i = 0 ; i &lt; centreElements.length ; ++i) {
      var el = centreElements[i].style
  
      el.position = 'absolute'
      el.left = '50%'
      el.top = '50%'
      el.margin = `-${centreElements[i].width / 2}px 0px 0px -${centreElements[i].offsetHeight / 2}px`
     }
    &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I create a canvas to animate the particles under the button?</p>