Canvas creates weird pixels on border

[Harusakii]

So basically, when running this simple code:

import { createCanvas } from "https://deno.land/x/skia_canvas@0.5.0/mod.ts";

const canvas = createCanvas(300, 300);
const ctx = canvas.getContext("2d");

// Set line width
ctx.lineWidth = 10;

// Wall
ctx.strokeRect(75, 140, 150, 110);

// Door
ctx.fillRect(130, 190, 40, 60);

// Roof
ctx.beginPath();
ctx.moveTo(50, 140);
ctx.lineTo(150, 60);
ctx.lineTo(250, 140);
ctx.closePath();
ctx.stroke();

console.log(canvas.toDataURL("png", 100))

it should return a simple house, which it does, but the problem is that it also generates weird pixels on the border of the images:

how it should look like (canvas in nodejs);

how it looks like with this package for deno:

in this example you see that the top left of the image has like different colors to single pixels which is very weird (zoom to the top left to see it better)

[Harusakii]

Sometimes it goes completely wild like this:

[nhrones]

I'm sorry, but every one of those images on this page, look exactly the same! I'm on an older Win10 laptop. What is the pixel density of your display? Is it retina?

[nhrones]

I'll wait for the experts to chime in. I just wanted you to know that I can't see any issue on my low res laptop.

[Harusakii]

here there are zoomed in on a white background, also the (edit: original) pics are 300x300 (edit:) and my display has a PPI of 110

[nhrones]

My PPI is only 72. Try this

const canvas = createCanvas(300, 300);
const ctx = canvas.getContext("2d");

// refresh the surface
ctx.clearRect(0, 0, 300, 300;

// draw the house

[Harusakii]

oh yeah, it indeed did help! But still very weird, I would expect a completely new and cleared Context when I create one and not need to clear it manually.

Maybe write this in the documentation ahah. thank you very much though (also for your replying speed)!