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

Froogal

Feb 28

Now I noticed if I do this:

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

it works but this seems like such an odd fix.

I render the square one pixel up the y axis and increase the height by 2 and this works?

Show thread

りき萌 (riki moe)Feb 28

@Froogal the square looks like it isn't quite snapped to the pixel grid properly. if you look closely, the edges are antialiased

meanwhile, clearRect is a very primitive operation—it sets a rectangle of literal pixels of the canvas to 0

in simple terms clearRect is equivalent to a fillRect that Math.floors the pixel positions, ignoring all transformations too—it operates directly on pixels and not on paths

so your clearRect is clearing a different rectangle than your fillRect!

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

Feb 28

@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!