Canvas is not clearing, generative images are overlapping

[Jubakee]

I'm having a problem where the output images are on top of each other.
For Example:
First generated image is wearing a black hat.
Second generated image is generated with no hat but the black hat from image one is still showing.

I have tried : ctx.clearRect(0, 0, canvas.width, canvas.height); but have had no luck as I'm not sure where it has to go.

I have been following the tutorial on youtube Code generative art for NFT in node.js .

Thank you.

[Marssurterre]

I have the same problem if you found the solution help me 🙏

[Jubakee]

for(let i = 1; i <= edition; i++){ ctx.clearRect(0, 0, canvas.width, canvas.height); for (const layer of layers) await drawLayer(layer, i); console.log("Creating edition " + i); }; This works for me. 😁✌️

…

On Wed, 1 Dec 2021 at 8:51 AM, Marssurterre ***@***.***> wrote: I have the same problem if you found the solution help me 🙏 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#111 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWRSAI6GQZOTESRGDFTPEWLUOUTMFANCNFSM5IZPJUXQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[Marssurterre]

You place it where exactly (main. Js)?? thank you 🙈

const createFiles = async edition => {
const layers = layersSetup(layersOrder);

let numDupes = 0;
for (let i = 1; i <= edition; i++) {
await layers.forEach(async (layer) => {
await drawLayer(layer, i);
});

[TheAppleDudeCo]

Hi Guys, I am having this very problem and for some reason, I can not get my head around it and a fix. Please can someone help me?

[Xavi0075]

i had this issue, the cause was an extra blank line in the layers list. once i cleaned up my code it went away

[alfreddagenais]

I have do a PR to correct this one #145 My solution is more simple. Just reset the canvas to the inital state 😄

[uniteXander]

I seem to be having this issue as well. When I tried the fix listed I ran into an illegal break statement. Anyone have any fixes for that?

[uniteXander]

if (numDupes > edition) break; //prevents infinite loop if no more unique items can be created
^^^^^

SyntaxError: Illegal break statement
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (C:\Users\chapm\Desktop\generative-art-node-main\index.js:2:53)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
PS C:\Users\chapm\Desktop\generative-art-node-main>

[alfreddagenais]

@uniteXander I think you need check your main.js refer to the original file. Check the line 147 of main.js It's a correct way to break into for loop. But in your code you close the for loop at line 139 😃 🤔

[uniteXander]

I thought I fixed it but I now have the "issue" of it doing the editions twice for some reason. I would like to make a large collection so while it doesnt make the image mess up, I think there is something going on on the back end that I am not seeing.

How do I close a loop?

[uniteXander]

@uniteXander I think you need check your main.js refer to the original file. Check the line 147 of main.js It's a correct way to break into for loop. But in your code you close the for loop at line 139 😃 🤔

also @alfreddagenais thank you for responding!

[uniteXander]

It stopped doing this with your edits! Thanks again!