I make a game called dots on canvas. This is a link to the game on the wiki: https://en.wikipedia.org/wiki/Dots_(game) I have a problem with drawing a polygon, can someone tell me how to do this?
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Документ без названия</title> </head> <body> <canvas id="my_canvas" width= 520px height="520px" style="display:block; margin: 0 auto; background-image: url(2.png)"></canvas> <h2 id="player1">0</h2> <h2 id="player2">0</h2> </body> <script> function draw() { try { var elem = document.getElementById("my_canvas"); var ctx = elem.getContext("2d"); // Var var polygon = 520; //max pixel var max_points = 14; //max points var pixel = 40; //size of point in pixel var counter = 0; // counter var n =14; var m =14; // Array var points = new Array(); // points var pointX = new Array(); // point for X var pointY = new Array(); // point for Y var pos_pt = new Array(n); // value of every point for(var i =0; i<n;i++) {pos_pt[i] = new Array(m);} for(var i = 0; i < n; i++) { for(var j = 0; j < m; j++) { pos_pt[i][j]= 0; } } // sing position of points for(var i =0 ;i < max_points; i++) { points[i] = pixel*i; } // drawing line for (var i = 0; i <= polygon; i = i + pixel) { //draw X line ctx.moveTo(0, i); ctx.lineTo(polygon, i); ctx.stroke(); // draw Y line ctx.moveTo(i, 0); ctx.lineTo(i, polygon); ctx.stroke(); } //drawing points massive points[i][j] for(var i = 0 ; i<max_points;i++) { for(var j = 0 ; j<max_points;j++) { ctx.beginPath(); ctx.arc(points[i],points[j],5,0,2*Math.PI); ctx.stroke(); } } // drawing on click ctx.canvas.addEventListener('click', function(event) { var mouseX = event.clientX - ctx.canvas.offsetLeft; var mouseY = event.clientY - ctx.canvas.offsetTop; var interval = 7; for (var i = 0; i < max_points; i++) { for (var j = 0; j < max_points; j++) { if(mouseX < (i*pixel)+interval && mouseX > (i*pixel)-interval && mouseY < (j*pixel)+interval && mouseY>(j*pixel)-interval) { ctx.beginPath(); if(counter % 2 == 0 && pos_pt[i][j] != 2 && pos_pt[i][j] != 1) { ctx.arc(points[i],points[j],12,0,2*Math.PI); ctx.fillStyle = 'blue'; ctx.fill(); ctx.stroke(); counter++; pos_pt[i][j] =1; ctx.fillStyle = 'red'; ctx.font ="16px serif"; pointX.push(i); pointY.push(j); ctx.fillText(pos_pt[i][j],points[i]-3.5,points[j]+3.5); } else if(counter % 2 != 0 && pos_pt[i][j] != 2 && pos_pt[i][j] != 1) { ctx.arc(points[i],points[j],12,0,2*Math.PI); ctx.fillStyle = 'red'; ctx.fill(); ctx.stroke(); counter++; pos_pt[i][j] = 2; ctx.fillStyle = 'blue'; ctx.font ="16px serif"; ctx.fillText(pos_pt[i][j],points[i]-3.5,points[j]+3.5); } else { alert("the something go wrong"); } // drawing blue polygon var player = pos_pt[i][j]; console.log(player); if(pos_pt[i][j]==1) { if(player +1 == 2 && player -1 == 2) { console.log("ok"); } } console.log(i,j,pos_pt[i][j]); console.log(i+1,j,pos_pt[i+1][j]); console.log(i-1,j,pos_pt[i-1][j]); console.log(i,j+1,pos_pt[i][j+1]); console.log(i,j-1,pos_pt[i][j-1]); } } } }); //end of try } catch (e) //error { alert("the something go wrong"); } } window.addEventListener('load',function(event){ draw(); }); </script> </html> <!-- ctx.beginPath(); ctx.fillStyle = "rgba(0,0,255,0.5)"; for (var m = 0; m < 3; m++) { console.log(pointX[m]); ctx.moveTo(pointX[m] * pixel, pointY[m] * pixel); ctx.lineTo(pointX[m + 2] * pixel, pointY[m + 2] * pixel); ctx.lineTo(pointX[m + 1] * pixel, pointY[m + 1] * pixel); ctx.lineTo(pointX[0] * pixel, pointY[0] * pixel); } ctx.closePath(); ctx.fill(); thank you in advance