title: Strike effect in Tic tac toe game
body: <p>I was working on a Tic Tac Toe game and was trying to make a strike effect for the Winner's squares.</p>
  
  <p>My idea was, I could take first and last squash, get their mid position and use a canvas to create a line but its not working properly.</p>
  
  <p>Following is a sample code with <a href="https://jsfiddle.net/RajeshDixit/qkpyc29n/53/" rel="nofollow noreferrer">Fiddle link</a>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function TicTacToe(container) {
    let count = 0;
    const getLabel = () =&gt; count++ % 2 === 0 ? 'X' : 'Y';
  
    function createGrid() {
      const handlerFn = function() {
        this.innerText = getLabel();
        this.removeEventListener('click', handlerFn);
      }
      Array.from({
        length: 9
      }, (_, i) =&gt; {
        const div = document.createElement('div');
        div.classList.add('tile')
        div.addEventListener('click', handlerFn)
        container.append(div);
      });
    }
    
    function createStrikeLine() {
      const tiles = document.querySelectorAll('.tile');
      const [ startX, startY ] = getPosition(tiles[0]);
      const [ endX, endY ] = getPosition(tiles[8]);
      
      console.log(startX, startY, endX, endY)
      
      const canvas = document.getElementById('ctx-strike');
      const context = canvas.getContext('2d');
      
      context.beginPath();
    context.moveTo(startX, startY);
      context.lineTo(endX, endY);
      context.stroke();
      context.closePath();
    }
    
    function getPosition(element) {
     const left = element.offsetLeft;
      const top = element.offsetTop;
      const height = Math.floor(element.offsetWidth / 2);
      return [ left + height, top + height ];
    }
  
    createGrid();
    createStrikeLine();
  }
  
  const containerDiv = document.querySelector('.content');
  TicTacToe(containerDiv)</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    display: flex;
  }
  
  .container {
    align-items: center;
    justify-content: center;
    height: 95vh;
    width: 95vw;
  }
  
  .content {
    flex-direction: row;
    flex-wrap: wrap;
    width: 30vmax;
  }
  
  #ctx-strike {
    /* position: absolute; */
    height: 30vmax;
    border: 1px solid black;
  }
  
  .tile {
    margin: 2px;
    background: white;
    border: 2px solid gray;
    border-radius: 4px;
    width: 8vw;
    height: 8vw;
    align-items: center;
    justify-content: center;
    font-size: 2em;
  }
  
  .strike-through {
    position: absolute;
    z-index: 1;
    border-bottom: 4px solid red;
    height: 6vh;
    width: 21vmax;
    
  }
  .translate-45 {
    -webkit-transform: rotate(45deg);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="content"&gt;&lt;/div&gt;
    &lt;canvas id='ctx-strike'&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I understand, issue is with co-ordinates, but I tried to make the canvas full with, still it fails. So the question,</p>
  
  <ul>
  <li>How to determine correct co-ordinates for any tile?</li>
  <li>Is there a better way to make stike effect other than canvas?</li>
  </ul>
  
  <p>Another issue i saw was, entire UI is responsive but not the canvas. If you resize container, tiles expand/shrink but the line remains same</p>