How to draw a grid of squares on a JS canvas with tooltip
Here is what I’ve got.
[iframe width=”100%” height=”400” src=”//jsfiddle.net/15sj0rxt/1/embedded/result,js,html,css/“ allowfullscreen=”allowfullscreen” frameborder=”0”]
There should be a function drawGrid with the following form which can be invoked to get the desired result.
- Grid is
- Each square is of size
- Each square is separated from adjacent squares and the canvas border by size
- The fill color of the square will be one of two colors,
drawGridmethod accepts a parameter
n. The first
nsquares will be
color_1(starting from the upper-left square, then going left-to-right, then top-to-bottom). The rest will be
nis more than the number of squares that would be drawn, then they are all
drawGridshould use the parameters specified in the
When you mouseover a given square, a small tooltip should appear that shows the text “row: …, col: …”, with the appropriate row and column entries for that square. The upper-left square is row 0, column 0.
Don’t attach onhover or similar events to each square, since that will be too expensive; instead detect the mouse position and work out which square is hovered.