Project: svg
Task (challenging): When click label hexagon, use mouse in canvas to draw a svg polygon hexagon (fill color is white, line width is '.line-width' value, line color is '.color' value). There is a rect whose left-top is the point when mouse pressing down and right-bottom is the point when mouse pressing up. The hexagon's left point is rect left edge center, right point is rect right edge center, 2 top points divide rect top edge to 3 parts (width 1:2:1), 2 bottom points divide rect bottom edge to 3 parts (width 1:2:1). Polygon points sequence is left, bottom, right, top.