Mastodawn

I don't understand what is happening here. I'm using HTML canvas to draw a rectangle and I'm moving the rectangle at 1fps. I'm noticing a 1 pixel trail at the top and bottom of the shape. Anyone have any idea what's happening here?

This moves the shape

// Move drop along x axis
    moveX(vel) {
        this.ctx.clearRect(this.x, this.y, this.w, this.h);
        this.x += this.vel;
        this.render();
    }

This calls the moves shape function every second

setInterval(() => {
    console.log("????")
    const coords = randomCoords()
    const color = "green";
    drop.moveX(10);
    // drop.moveY(10);
}, 1000);

#webdevelopment #question #html5canvas

Show thread

kulupuSoweli Feb 28

@Froogal i'm not that well versed, but is there a chance you're updating the background as well every frame?

Show thread

Froogal

@kulupuSoweli no im just clearing the square, because the idea is gonna be to simulate colliding particles, if I update the whole background wont it clear all of the squares instead of just the one?

Show thread

kulupuSoweli Mar 1

@Froogal oh, that could explain it. the idea is, with most visual engines, that updating the position of something requires redrawing the background first. so if you have a ton of particles, the goal every frame would be to first draw the background, and then draw the particles in their current position, and repeat once per frame

i'm not experienced in css to the level you seem to be though, so take what i say with a grain of salt. You're doing really cool things!!

Show thread

Froogal

Mar 1

@kulupuSoweli aww thank you. Im gonna try this out first chance i get!