title: Create line in canvas word search game
body: <p>I created word search game in canvas. Now I want when user select character for determine word draw line for highlight that but this is my results:
   <img src="https://i.stack.imgur.com/IeZ0w.png" alt="enter image description here"></p>
  
  <p>and</p>
  
  <p><img src="https://i.stack.imgur.com/9uyh0.png" alt="enter image description here"></p>
  
  <p>I want draw line like bellow image:
  <img src="https://i.stack.imgur.com/ipeZ7.png" alt="enter image description here">
  And this is my code for this section:</p>
  
  <pre><code>    function checkForWord() {
  
          // get the starting &amp; ending grid-cell
          // that the user dragged across
          var startCol = parseInt(startX / colWidth);
          var startRow = parseInt(startY / rowHeight);
          var lastCol = parseInt(mouseX / colWidth);
          var lastRow = parseInt(mouseY / rowHeight);
  
          // get the word that the user dragged across
          // by adding the letters from the starting cell
          // to the ending cell
          var word = "";
          var length = Math.max(Math.abs(startCol - lastCol) + 1, Math.abs(startRow - lastRow) + 1);
          var dx = 0;
          var dy = 0;
          var x = startCol;
          var y = startRow;
          if (lastCol &gt; startCol) {
              dx = 1;
          }
          if (lastCol &lt; startCol) {
              dx = -1;
          }
          if (lastRow &gt; startRow) {
              dy = 1;
          }
          if (lastRow &lt; startRow) {
              dy = -1;
          }
          while (length &gt; 0) {
              // add the letter in this grid-cell to the word
              word += letters[y * colCount + x];
              // highlight the squares that the user selected
              ctx1.save();
              ctx1.fillStyle = "#f5aded";
              ctx1.lineCap = 'round'
              ctx1.globalAlpha = 1.00;
              ctx1.globalCompositeOperation = "destination-over";
              ctx1.fillRect((x) * colWidth  , (y) * rowHeight , colWidth , rowHeight);
              ctx1.restore();
              // increment x/y/length for the next letter
              x += dx;
              y += dy;
              length--;
          }
  
          // reverse the word if dragged backwards
          if (dx &lt; 0 || dy &lt; 0) {
              word.split('').reverse().join('');
          }
  
          // test if the word is a solution word assuming it's spelled frontwards
          var frontwards = words.indexOf(word.toLowerCase());
  
          // test if the word is a solution word assuming it's spelled backwards
          var backwards = words.indexOf(stringBackwards(word).toLowerCase());
  
          // if the selected word matches a puzzle word
          // tell the user they found the word an remove the word from the puzzle
          // if the selected word doesn't match any remaining puzzle word
          // tell the user to try again
          if (frontwards &gt;= 0 || backwards &gt;= 0) {
              var index = Math.max(frontwards, backwards);
              $results.text("You just found: " + words[index]);
              words.splice(index, 1);
              if (words.length &gt; 0) {
                  var remainingWords = "Find:"
                  for (var i = 0; i &lt; words.length; i++) {
                      remainingWords += " " + words[i];
                  }
                  $puzzle.text(remainingWords);
              } else {
                  $puzzle.text("Congratulations...");
                  $results.text("You found all the words in the puzzle!");
              }
  
          } else {
              if (words.length &gt; 0) {
                  $results.text("Sorry...Try Again.");
              }
          }
      }
  </code></pre>
  
  <p>How I can do this work please help!</p>