使用JavaScript在HTML5画布上制作单词搜索网格

Question

I want to develop a word search game such as [ http://codecanyon.net/item/word-search-game/full_screen_preview/2708856]

Uptil now I created two canvases- 1. for the word to search

function drawWords(words){
var c2 = document.getElementById("canvas2");
var ctx2 = c2.getContext("2d");
ctx2.fillStyle = "green";
ctx2.font = "bold 20px arial";
for(i=0,j=40; i< words.length; i++,j+=30)
{
ctx2.fillText(words[i], 70, j);
}
}

2.for the grid.The grid was drawn by drawing small rectangles to cover entire canvas

function drawRect(){
var c1=document.getElementById("canvas1");
var ctx1 =c1.getContext('2d'),i,j;
for(i=0; i<405 ;i+=27)
{
for(j=0;j<405;j+=27)
{
    ctx1.rect(i,j,27,27);
    ctx1.stroke();

}
}
}

I have stored the words along with random letters in a grid[15][15] array using javascript.However I have no idea how to print these on my grid canvas and also to link the words with this grid to know correct selection. Please help

Answer 1

To print text to canvas, you need to use

ctx.font="20px Arial"; //changed to whatever you want
  ctx.fillText("Hello World!",10,50); //in a for loop change hello world with letter 
                                      //the two number correspends to x and y
                                      //do some math and you will find how to fit the letters in the canvas

For testing i think is good idea to store the x and y that you use it to print letters and from where the user has clicked you figure out the x and y of the mouse and make your test

sorry for the english :s