覆盖画布对象，一起模糊吗？

Question

I am a novice canvas programmer, just playing around with the idea of a hexagonal grid being a "game board" of sorts.

I took some code that I found online, and added to one of the methods to provide a "highlighting" capability. Inside the drawHex function, the strokeStyle will change to a neon blue color, and draw a neon blue hex on top of the board (indicating that hexagon is "highlighted"). Then, if you click the same hex, it will redraw a black hexagon on top of it, in order to "erase" the highlight. However, if you check it out in this jsfiddle: http://jsfiddle.net/DHW7f/ you'll see that highlighting a hexagon then clicking it again, results in some of the neon blue color remaining in the blurred edges of the hexagon.

As I said, I am completely new to the idea of canvas... is there a better way to "highlight" an object like that? If not, is there a way to fix this blur? I tried making the neon blue hexagon linewidth smaller, but it didn't seem to have an effect.

This is the particular code involved in the highlighed hexagon:

HexagonGrid.prototype.drawHex = function(x0, y0, fillColor, debugText, highlight, revert)     {
if (highlight == true && revert == false){
    this.context.strokeStyle = "#00F2FF";
}

Answer 1

Remember that on a <canvas> element, stuff gets drawn and it's not remembered: It's just drawn. Right now, you're drawing hexagons on top of hexagons. This is a very efficient way to highlight and un-highlight shapes, but if you really want to get rid of the blur, you need to change the whole style of your program:

• Make a Hexagon constructor and then the HexagonGrid a kind of "system" of Hexagon s. Store the Hexagon s in a hexes[] property.
• Don't use as many parameters in functions. Save more stuff like location or stroke as properties so they're more constant. This makes up for shapes drawn on the canvas not already being saved.
• Transfer the .drawHex() method to the Hexagon prototype and then find a new system of finding a Hexagon in HexagonGrid.prototype.clickEvent() using the new system. I wouldn't suggest a Hexagon.prototype.isMouseOn() method and looping through the hexes[] property because that would be inefficient. You should do something similar to your current method where the hex clicked is calculated based on the mouse position.
• Once you've found the right hex in HexagonGrid.prototype.clickEvent() , change the Hexagon 's stroke property and the stroke property of the old selected Hexagon and then redraw the whole grid. This is inefficient compared to what you're doing now, but it's the only way to overwrite everything. When you redraw the grid, make sure to "clear the canvas" by drawing a white background over everything.

I know that the solution I came up with is rather abstract, will probably take a lot of work to integrate, and will overall be less efficient since you're redrawing everything on each click, but unfortunately, that's what happens with <canvas> elements where there's no way alter previously drawn shapes.