Moving circles with pure javascript and html canvas

I am new to programming and am playing around with HTML canvas and JavaScript. I am only using vanilla JavaScript right now, and I am trying to get a circle to move and get bigger or smaller when I click some buttons.

Everything that I’ve tried to do has resulted in, for example, the more I press the move left button, the faster it goes left, and if I press the move right button while it is moving left, it just slows down until it stops. Then it goes right.

This happens with every direction and size. All of the attempts I’ve made are basically this same code in a different order, so if anyone knows how to do this, I’d appreciate it. Thx.

Ignore the file names… they are from an old project. The styling looks weird in here because I made it on a much larger screen. I’m not that good with CSS yet.

const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext('2d',);
const posUp = document.getElementById("posUp");
const posDown = document.getElementById("posDown");
const posRight = document.getElementById("posRight");
const posLeft = document.getElementById("posLeft");
const radUp = document.getElementById("radUp");
const radDown = document.getElementById("radDown");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let size = 0;
let PI = Math.PI;
let posX = window.innerWidth/2;
let posY = window.innerHeight/2;
let angle = 0;
let radius = 50;



const rrgb = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`
const strokeRRGB = `rgb(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)})`


function posUpFunc() {    
    posY-= 2;
}
function posRightFunc() {
    posX+= 2;
}
function posDownFunc() {
    posY+= 2;
}
function posLeftFunc() {
    posX-= 2;
}
function radUpFunc() {
    radius++;
}
function radDownFunc() {
    radius--;
}

posUp.onclick = () => {
    console.log(posY)

    setInterval(posUpFunc, 10);
}

posRight.onclick = () => {
    console.log(posY)    
    setInterval(posRightFunc, 1);

}

posDown.onclick = () => {
    console.log(posY)
    setInterval(posDownFunc, 10);

}

posLeft.onclick = () => {
    console.log(posY)
    setInterval(posLeftFunc, 10);

}

radUp.onclick = () => {
    console.log(posY)
    setInterval(radUpFunc, 10);

}

radDown.onclick = () => {
    console.log(posY)
    setInterval(radDownFunc, 10);

}


function draw() {
    ctx.fillStyle = rrgb;
    ctx.strokeStyle = strokeRRGB;
    ctx.lineWidth = 3;
    ctx.clearRect(0,0,window.innerWidth,window.innerHeight)
    ctx.beginPath();
    ctx.arc(posX, posY, radius, 0, PI * 2);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}    



setInterval(draw, 10)
body {
    overflow: hidden;
}


#canvas1 {
    position: absolute;
    border: 2px solid black;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}

button {
    height: 2.5%;
    width: 5%;
    position: absolute;
    cursor: pointer;
    z-index: 100;
}

button:hover {
    border: 1px solid black;
}

#posUp {
    left: 5%;
}

#posRight {
left: 10%;
top: 6.5%;
}

#posDown {
left: 5%;
top: 10%;
}

#posLeft {
left: 0%;
top: 6.5%;

}

#radUp {
left: 50.5%;
}

#radDown {
left: 50.5%;
top: 10%;
}

#circle-direction {
position: relative;
top: 5%;
left: 3%;
width: fit-content;
height: fit-content;
z-index: 100;

}

#circle-size {
    position: absolute;
    top: 0.9%;
    left: 50%;
    width: fit-content;
    height: fit-content;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="aestheticPasswordStrengthMeter.js" defer></script>
<link rel="stylesheet" href="aestheticPasswordStrengthMeter.css">  
  <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="circle-direction">Change circle direction.</div>
    <div id="circle-size"> Change circle size.</div>
    <button id="posUp">⇑</button>
    <button id="posRight">⇒</button>
    <button id="posDown">⇓</button>
    <button id="posLeft">⇐</button>
    <button id="radUp">⇑</button>
    <button id="radDown">⇓</button>
    <canvas id="canvas1"></canvas>
</body>
</html>