I am building a sudoku puzzle generator + sudoku downloader. There is no problem with the sudoku itself, but with the downloaded image of it.

So, I'm using html2 canvas, which allows me to download html elements. I did this with the sudoku. The big problem is that when I download that html element, I see some grayscale around the borders, as you can see in this example:

And in the website you can't see that grayscale border:

This probably does not have to do anything with css, because there is no problem in the styling itself, but in the way the html was downloaded.

I tried using different image formats, like png, jpg and heic, the results were all the same.

If someone knows anything that could solve my problem, please let me know.

This is a minimal example of my code. The screenshotTarget is just a html 2 element in this situation

document.getElementById("dl-png").onclick = function () {
        const screenshotTarget =       document.getElementById("example-table");
html2canvas(screenshotTarget, {
          scale: 4.5,
        }).then((canvas) => {
          const base64image = canvas.toDataURL("image/jpg");
          var anchor = document.createElement("a");
          anchor.setAttribute("href", base64image);
          anchor.setAttribute("download", "sudoku.jpg");
          anchor.click();
          anchor.remove();
        });
};