Create an object in Javascript and animiate it

I'd like to create objects in Javascript and have them be able to animate themselves, i.e. not in an external animation function driving them.

<script>
const Canvas = document.getElementById("diagramCanvas");
const CanvasContext = Canvas.getContext('2d');
const width = Canvas.width, height = Canvas.height;

var cmTID;
function SelfMovingBox() {
    this.x = width;

    this.animate = function() {
        CanvasContext.clearRect(this.x,10,100,20);
        this.x -= 10;
        CanvasContext.save();
        CanvasContext.strokeStyle = 'blue';
        CanvasContext.strokeRect(this.x,10,100,20);
        CanvasContext.restore();
        setTimeout(this.animate, 100);
    }


}

let box = new SelfMovingBox();
box.animate();

</script>

But this "loop" will not run more than once. Why does it terinate with no error, and how could I achieve this, without a this.move() function in the object invoked externally in an animation function loop?

Thanks!

This looks like a problem with the use of this.

Looking at just the relevant parts:

function SelfMovingBox() {
    this.x = width;
    this.animate = function() {
        this.x -= 10;
    }
}

When you set this.x = width, this refers to the SelfMovingBox instance, because you are calling the function with new.

But in animate, this is referring to Window, which is JavaScript's default (weird) behavior for functions.

You have a few options: use an arrow function () => {} for lexically scoped this:

this.animate = () => {
  this.x -= 10;
}

or use bind to explicitly bind this:

this.animate = (function() {
  this.x -= 10;
}).bind(this);