Canvas animation causing serration in images

Question

I created a game, using JS and Canvas, and when the user starts the game, the scenario and its objects begin to move. The animation of it is done through a requestAnimationFrame, which is run constantly.

Below is a code that, although not the exact code of my game, has the same concept of what I’m doing:

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");
let positionX = 0;
let velocity = 10;

function update() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "#f00";
    context.fillRect(positionX, canvas.height / 2, 50, 50);

    positionX += velocity;
    velocity += velocity == 30 ? 0 : 0.01;

    if (positionX > canvas.width) {
        positionX = -50;
    }
    requestAnimationFrame(update);
}

update();

<canvas id="canvas" width="800" style="background-color: #000;"></canvas>

The problem is that in my game (and even sometimes in the example above, but it’s hard to notice), some images get "tremendous", as if they were images of "old televisions".

For example, in the tube images of my game, where this problem is sharper, the black edge of it gets serrated, or part of the image is full of fine lines coming up from the bottom. I believe this is happening due to the amount of images being moved on the canvas screen.

To solve this problem, I tried to define the property context.imageSmoothingQuality for "high", but it has no effect. What can I do to solve this problem?