Select multiple cells in grid of canvas using a mouse drag-CodePudding

I want to implement the selecting feature by dragging, so if drag on the grid chart, the multiple cell in form of rectangle/square, but mine is not working properly - square should be formed while I moving the mouse. But now it draw a square when i drag it and move up the mouse.

I also want the cell is selecting by square in every direction of diagonals

How do I fix it?

function getSquare(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: 1   (evt.clientX - rect.left) - (evt.clientX - rect.left),
        y: 1   (evt.clientY - rect.top) - (evt.clientY - rect.top)
    };
}

function drawBoard(context) {
    for (var x = 0.5; x < 10001; x  = 10) {
      context.moveTo(x, 0);
      context.lineTo(x, 10000);
    }

    for (var y = 0.5; y < 10001; y  = 10) {
      context.moveTo(0, y);
      context.lineTo(10000, y);
    }

    context.strokeStyle = "#ddd";
    context.stroke();
}

function fillSquare(context, x, y){
    context.fillStyle = "#70B7B5"
    context.fillRect(x,y,9,9);
}

var canvas = document.getElementById('myBoard');
var context = canvas.getContext('2d');

drawBoard(context);

var isDrag=false;
var previousPos = (-1,-1);
canvas.addEventListener('mousedown', function(evt) {
    var mousePos = getSquare(canvas, evt);
    
    isDrag=true;
    fillSquare(context, mousePos.x, mousePos.y)
    previousPos = mousePos;

}, false);

canvas.addEventListener('mousemove', function(evt) {
    if (isDrag){
        var mousePos = getSquare(canvas, evt);
        
        if (mousePos.x-previousPos.x){
            for (i=0; i<(mousePos.x-previousPos.x)/10;i  ){
                for(j=0; j<(mousePos.x-previousPos.x)/10;j  ){
                fillSquare(context, mousePos.x-(j*10), mousePos.y-(i*10));
            }
            }
        }else{
            for (i=0; i<(previousPos.x-mousePos.x)/10;i  ){
                for(j=0; j<(previousPos.x-mousePos.x)/10;j  ){
                fillSquare(context, mousePos.x (j*10), mousePos.y-(i*10));
            }
            }
        }
        previousPos = mousePos; 
               
    }
}, false);

canvas.addEventListener('mouseup', function(evt) {
    if (isDrag){

        isDrag = false;
        
    }
 
}, false);

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
    <canvas id="myBoard" width="10000" height="10000"></canvas>
    <script type="text/javascript" src="myBoard2.js"></script>

</body>

CodePudding user response：

you did everything well and i changed it a little as bellow: use this range function for selecting squares in every direction of diagonals

function range(start, end) {
    var ans = [];
    if (end > start) {
        for (let i = start; i <= end; i  = 10) {
            ans.push(i);
        }
    } else {
        emptySquare(context);
        for (let i = start; i >= end; i -= 10) {
            ans.push(i);
    }}
    return ans;
}

and emptySquare() to clear color of context rect as bellow:

function emptySquare(context) {
    context.rect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#ffffff"
    context.fill();
    context.strokeStyle = "#ddd";
    context.stroke();
}

then u just need to rewrite mousemove handler like this:

canvas.addEventListener('mousemove', function(evt) {
    if (isDrag) {
        var mousePos = getSquare(canvas, evt);
        var x_dist = range(previousPos.x, mousePos.x);
        var y_dist = range(previousPos.y, mousePos.y);
        for (x in x_dist) {
            for (y in y_dist) {
                fillSquare(context, x_dist[x], y_dist[y]);
        }}}
}, false);

and call emptySquare(context); in mousedown handler too...