JSFiddle - React, Tailwind, and code Playground

by Fantom Fantomi

HTML

<div id="ways" style="width:1000px;margin:0 auto;height:100%;">
        <canvas id="canvas" width="1000" height="1000"></canvas>
    </div>
<!-- I want just counting the click on circles-->

JavaScript

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var radius = 70;
var lineWidth = 5;
var cols = 3;
var rows = 2;
var distance = 50;
var circles = [];
var turnclicking=0;

//click circle to write
canvas.onclick = function(e) {
    // correct mouse coordinates:
    if(turnclicking<3){
        turnclicking++;
    var rect = canvas.getBoundingClientRect(),  // make x/y relative to canvas
        x = e.clientX - rect.left,
        y = e.clientY - rect.top,
        i = 0, circle;

    // check which circle:
    while(circle = circles[i++]) {
        context.beginPath();  // we build a path to check with, but not to draw
        context.arc(circle.x, circle.y, circle.radius, 0, 2*Math.PI);
        if (context.isPointInPath(x, y) && !circle.clicked) {
          circle.clicked = true;
          context.fillStyle = "blue";
          context.font = "bold 34px Arial";
          context.textAlign="center";
          context.fillText("Yeah", circle.x, circle.y);
          
            break;
        }
    }
    }
    else
        alert("You must avoid clicking");
};


//draw circles
for (var i = 0; i < rows; i++) {
    for (var j = 0; j < cols; j++) {
        // Draw circle
        var offset = radius * 2 + lineWidth + distance;
        var center = radius + lineWidth;
        var x = j * offset + center;
        var y = i * offset + center;
            
            circles.push({
        id: i + "," + j,    // some ID
        x: x,
        y: y,
        radius: radius,
        clicked:false
    });
        console.log(circles)
        context.beginPath();
        context.arc(x, y, radius, 0, 2 * Math.PI, false);
        context.fillStyle = 'green';
        context.fill();
        context.lineWidth = lineWidth;
        context.strokeStyle = '#003300';
        
        if (j != cols - 1) {
            // Draw horizontal line
            var hLineX = x + radius;
            var hLineY = y;
            context.moveTo(hLineX, hLineY);
        ...