How do I move a rectangle towards the mouse click? (HTML canvas)

Question

Recently, I have been trying to learn to use the HTML/Javascript canvas. I already know how to use HTML, CSS, and most Javascript code, but I have always been slightly bad at using the canvas. I wanted to make that known, because I want the answer to specifically use the canvas.

I am attempting to move a character towards a mouse click, but it is not working out very well and I have hit a roadblock. The character moves vertically to the point I want it to, but it does not always go to the correct point horizontally. Additionally, I would prefer the vertical and horizontal movement to occur at the same time, but it is fine if that is not possible.

I am currently using if/then statements, with the y-coordinate if-statement inside of the x-coordinate if-statement. I have already tried using four separate if/then statements, with the y-coordinate and x-coordinate if-statements not inside one another, but the result was not as good as what I am currently doing. I am sure there is an easier way than what I am doing, so I am open to all suggestions at this point.

Thanks in advance.

Here is my code:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="650" height="450"
style="border:1px solid #d3d3d3;" onclick="play()"></canvas>

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = 0;
var y = 0;
var xx = 0;
var yy = 0;
setInterval(animation, 1);

ctx.beginPath();
ctx.rect(x, y, 24, 8);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.rect(x, y + 8, 24, 12);
ctx.fillStyle = "#ffd49c";
ctx.fill();
ctx.beginPath();
ctx.rect(x, y + 8, 6, 12);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.rect(x, y + 20, 24, 28);
ctx.fillStyle = "red";
ctx.fill();
ctx.beginPath();
ctx.rect(x, y + 48, 24, 8);
ctx.fillStyle = "#000";
ctx.fill();
ctx.beginPath();
ctx.rect(x, y + 26, 10, 10);
ctx.fillStyle = "#ffd49c";
ctx.fill();

function play() {
    x = event.clientX - 8;
    y = event.clientY - 8;
}

function animation() {
    if (xx < x) {
        xx++;
        if (yy < y) {
            yy++;
        } else if (yy > y) {
            yy--;
        }
    } else if (xx > x) {
        xx--;
        if (yy < y) {
            yy++;
        } else if (yy > y) {
            yy--;
        }
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.rect(xx, yy, 24, 8);
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.beginPath();
    ctx.rect(xx, yy + 8, 24, 12);
    ctx.fillStyle = "#ffd49c";
    ctx.fill();
    ctx.beginPath();
    ctx.rect(xx, yy + 8, 6, 12);
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.beginPath();
    ctx.rect(xx, yy + 20, 24, 28);
    ctx.fillStyle = "red";
    ctx.fill();
    ctx.beginPath();
    ctx.rect(xx, yy + 48, 24, 8);
    ctx.fillStyle = "#000";
    ctx.fill();
    ctx.beginPath();
    ctx.rect(xx, yy + 26, 10, 10);
    ctx.fillStyle = "#ffd49c";
    ctx.fill();
}
</script> 

</body>
</html>

I mean, that's not a bad attempt at all, although points deduced for the 31337 minified vars for readability :) Anyway you want to be using transofrms instead for the smooth action you're looking for. Added as comment since short on free time to make a PoC — Chris W., Aug 20 '20 at 20:39

How do I move a rectangle towards the mouse click? (HTML canvas)

0 Answers0