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

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!