{
const h = 350,
w = 350,
margin = 10,
num = 10,
cell = 0,
x = cell,
y = cell,
c = DOM.context2d(w,h)
function drawGrid(){
c.lineWidth = 0.75
c.globalAlpha = 0.5
c.rect(margin,margin,w-2*margin,h-2*margin)
c.strokeRect(margin,margin,w-2*margin,h-2*margin)
c.clip()
var max = Math.sqrt(w*w+h*h),
cos60 = Math.cos(Math.PI / 3),
sin60 = Math.sin(Math.PI / 3),
cos120 = Math.cos(Math.PI * 2 / 3),
sin120 = Math.sin(Math.PI * 2 / 3);
for(var i = x; i <= x + w; i += num) {
c.moveTo(i, y);
c.lineTo(i + cos60 * max, y + sin60 * max);
c.moveTo(i, y);
c.lineTo(i + cos120 * max, y + sin120 * max);
}
var dy = sin60 * num,
maxX = Math.ceil(w / num) * num + x;
for(i = y; i <= y + h; i += dy) {
c.moveTo(x, i);
c.lineTo(x + w, i);
}
for(i = y + dy * 2; i <= y + h; i += dy * 2) {
if(i > 0) {
c.moveTo(x, i);
c.lineTo(x + cos60 * max, i + sin60 * max);
}
c.moveTo(maxX, i);
c.lineTo(maxX + cos120 * max, i + sin120 * max);
}
c.stroke()
}
drawGrid()
return c.canvas;
}