如何将事件添加到使用html5绘制的矩阵？

Question

I just need a development suggestions.I am not that experienced so I do not know all the possibilities I have. So, I try to develop a crossword generator with javascript. I thought of drawing a matrix on a canvas using HTML5 lines, and because it must be generated I thought of doing this at a press of a button. It would be better with rectangles? or what other way exists in order to implement the matrix? And the most important question of all: how do I add events on the matrix so I can write letters in it? All I need is just o suggestion of where to look, for adding events especially. It is kind of a road block right now so please help if you can. Thank you.

Answer 1

If I was developing this crossword using canvas, I would use a node structure which holds references to other nodes. for example,

function node(){
//dims
    this.x;
    this.y;
    this.width;
    this.height;
//
    this.id;
    this.neighbors = [];
...
}

For attaching events to a specific node, you will have to determine the canvas mouse position (e) X, Y position considering the width and height(node), so if the user clicks on a node, you find out the node ID and do something with it.

For drawing use strokeRect() with fillText() for each node.

... My A* pathfinding implementation might help you. (Graphs, Node structure with canvas) also sorry for messy code or bugs, it was just for fun.

Implementation

Github

I hope this helps you. Happy Holidays.