Символ не перемещается в правильное место назначения / неправильный угол при щелчке мыши - html canvas

Question

РЕДАКТИРОВАТЬ: РЕШЕНО

Я делаю игру, в которой персонаж перемещается по щелчку правой кнопкой мыши.Персонаж должен медленно перемещаться / ходить (не телепортироваться) к месту назначения, которое вы установили, щелкнув правой кнопкой мыши на холсте.Проблема в том, что я использовал некоторую математику, чтобы определить угол, к которому должен идти персонаж, а также написал функцию, которая рисует окружность прямо на месте назначения (пытаясь отладить).Дело в том, что я нажимаю на позицию, круг назначения отображается в другой позиции, и персонаж идет к другой трехмерной позиции.Я недостаточно опытен, и я понятия не имею, что вызывает это.Математика, которую я использовал, была в значительной степени скопирована, потому что я не очень понимаю, как они работают, так что это тоже проблема.

Проблема в значительной степени в этом изображении https://imgur.com/1lm2haM

Редактировать: И это изображение - то, что я пытаюсь сделать https://imgur.com/amQgGxM

        //VARIABLES_________________________________
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        var WIDTH = 640;
        var HEIGHT = 360;
        var CANVAS_WIDTH = 640;
        var CANVAS_HEIGHT = 360;
        var renderList = [];

        var selfX = 250;
        var selfY = 100
        var frameX = 0;
        var playerSpdX = 0;
        var playerSpdY = 0;
        var drawDest = false;
        var destX;
        var destY;

        var Img = {};
        Img.player = new Image();
        Img.player.src = "Human_walk_spritesheet.png";
        Img.map = new Image();
        Img.map.src = "maptest.png";
        Img.bullet = new Image();
        Img.bullet.src = "bullet.png";


        renderList.push({img: Img.player, spdX: playerSpdX, spdY: playerSpdY, currX: selfX, currY: selfY});

        //CODE______________________________________
        function render(){
            ctx.clearRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);

            ctx.drawImage(Img.map, 0, 0);

            for(i in renderList){
                var renderObject = renderList[i];


                renderObject.currX += playerSpdX;
                renderObject.currY += playerSpdY;

                selfX = renderObject.currX;
                selfY = renderObject.currY;

                ctx.drawImage(renderObject.img, frameX, 0, 120, 218, selfX, selfY, renderObject.img.width/31/8, renderObject.img.height/8);
            }
            if(drawDest)
            ctx.drawImage(Img.bullet, destX, destY);

            updateAnimation();
        }

        setInterval(render, 100);


        document.onmousedown = function click(event){
            if(event.button == 2){//right click
                clickX = event.clientX;
                clickY = event.clientY;

                clickX -= selfX;
                clickY -= selfY;

                aimAngle = Math.atan2(clickY, clickX) / Math.PI * 180;
                var spdX = Math.cos(aimAngle/180*Math.PI)*10;
                var spdY = Math.sin(aimAngle/180*Math.PI)*10;
                setPlayerSpeed(spdX, spdY);
                drawDestinationDot(clickX, clickY);
            }
        }



        document.oncontextmenu = function(mouse){
            mouse.preventDefault();
        }


        function setPlayerSpeed(spdX, spdY){
            playerSpdX = spdX;
            playerSpdY = spdY;
        }

        function drawDestinationDot(x, y){
            drawDest = true;
            destX = x;
            destY = y;
        }

Answer 1

Итак, потратив более 3 дней до и после того, как мой пост объединился, я наконец-то обнаружил, в чем проблема.Отчасти я виноват, что я не опубликовал весь код, но, как показывает переполнение стека, я пытался опубликовать только соответствующий код, чтобы не запутать людей, которые будут пытаться помочь мне, и я не думал, что эта часть, которую я удалил, была релевантнойно это было.Я в значительной степени новичок.Таким образом, вся проблема заключалась в изменении размера холста, на который я не обращал никакого внимания.Я скопировал свой код и просто использовал простые прямоугольники вместо изображений, и он работал отлично, потому что я также забыл добавить изменение размера холста.Вот и все:

resizeCanvas();
        function resizeCanvas(){
            CANVAS_WIDTH = window.innerWidth - 4;
            CANVAS_HEIGHT = window.innerHeight - 4;

            let ratio = 16 / 9;
            if(CANVAS_HEIGHT < CANVAS_WIDTH / ratio)
                CANVAS_WIDTH = CANVAS_HEIGHT * ratio;
            else
                CANVAS_HEIGHT = CANVAS_WIDTH / ratio;

            canvas.width = WIDTH;
            canvas.height = HEIGHT;

            canvas.style.width = '' + CANVAS_WIDTH + 'px';
            canvas.style.height = '' + CANVAS_HEIGHT + 'px';
        }

Спасибо за помощь Loïc.