Demo : https://www.lenlop123.com/2020/09/157-controll-by-button-canvas_22.html

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
    canvas {
        border: 1px solid #d3d3d3;
        background-color: #f1f1f1;
    }
</style>

<div>
    <canvas id="canvas" class="canvas"></canvas>
</div>

<script>


    var myGamePiece;
    var myUpBtn;
    var myDownBtn;
    var myLeftBtn;
    var myRightBtn;


    // hàm onload sẽ chạy sau cùng, sau khi load đủ dữ liệu
    window.onload = function () {
        startGame()
    };

    function startGame() {
        myGamePiece = new component(30, 30, "red", 10, 120);    // vẽ 1 component        
        myUpBtn = new component(30, 30, "blue", 50, 10);
        myDownBtn = new component(30, 30, "blue", 50, 70);
        myLeftBtn = new component(30, 30, "blue", 20, 40);
        myRightBtn = new component(30, 30, "blue", 80, 40);
        myGameArea.start();     // khởi tạo canvas        
    }

    var myGameArea = {
        canvas: document.getElementById('canvas'),
        start: function () {
            this.canvas.width = 480;                            // Lấy thẻ HTML Canvas
            this.canvas.height = 270;
            this.context = this.canvas.getContext("2d");        // Vẽ ở mô hình 2D            
            this.interval = setInterval(updateGameArea, 20);    // Vẽ lại hình mỗi 20ms
       
            window.addEventListener('mousedown', function (e) {
                myGameArea.x = e.pageX;
                myGameArea.y = e.pageY;
            })
            window.addEventListener('mouseup', function (e) {
                myGameArea.x = false;
                myGameArea.y = false;
            })
            window.addEventListener('touchstart', function (e) {
                myGameArea.x = e.pageX;
                myGameArea.y = e.pageY;
            })
            window.addEventListener('touchend', function (e) {
                myGameArea.x = false;
                myGameArea.y = false;
            })
        },
        clear: function () {
            this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
    }

    // khai báo cấu trúc 1 component và gán cho 1 biến nào đó


    function component(width, height, color, x, y) {
        this.width = width;
        this.height = height;
        this.speedX = 0;
        this.speedY = 0;
        this.x = x;
        this.y = y;
        this.update = function () {
            ctx = myGameArea.context;
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
        this.clicked = function () {
            var myleft = this.x;
            var myright = this.x + (this.width);
            var mytop = this.y;
            var mybottom = this.y + (this.height);
            var clicked = true;
            if ((mybottom < myGameArea.y) || (mytop > myGameArea.y) || (myright < myGameArea.x) || (myleft > myGameArea.x)) {
                clicked = false;
            }
            return clicked;
        }
    }

    function updateGameArea() {
        myGameArea.clear();
        if (myGameArea.x && myGameArea.y) {
            if (myUpBtn.clicked()) {
                myGamePiece.y -= 1;
            }
            if (myDownBtn.clicked()) {
                myGamePiece.y += 1;
            }
            if (myLeftBtn.clicked()) {
                myGamePiece.x += -1;
            }
            if (myRightBtn.clicked()) {
                myGamePiece.x += 1;
            }
        }
        myUpBtn.update();
        myDownBtn.update();
        myLeftBtn.update();
        myRightBtn.update();
        myGamePiece.update();
    }
</script>
<p>Click on the blue "buttons" to make the red square move.</p>