DEV Community

Discussion on: Why won't anything draw on my canvas?

View post

Replies for: Try to avoid document.writeln() since it deletes your existing HTML elements. If you need to debug your code, you can use console.log() which will ...

Collapse
 
calinbaenen profile image
Calin Baenen •

I did use console.log() to debug my code. document.writeln is a different part of the program.

Did you not fully (thoroughly*) read the post? :p

Collapse
 
ducaale profile image
Mohamed Dahir •

let's say you had an HTML file like this:

<html>
  <body>
    <canvas id="result"></canvas>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

as soon this line gets executed

document.writeln("#fff<br/>");
Enter fullscreen mode Exit fullscreen mode

your HTML will be converted to this:

<html>
  <body>
    #fff<br/>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

As you can see, this removes your canvas element from the DOM which will lead document.getElementById("result") to fail.

Now let's take a look at your code

for(const chara of encode(input)) {
  color += chara;
  if(color.length >= 6) {
    itr += 1;
    colors.push(color);
    document.writeln(itr+": "+color+"<br/>");
    color = "";
  }
}
Enter fullscreen mode Exit fullscreen mode

Since you called the makeColor() function with the string Example, you would get the string "6912097109112108101". This string contains chars that are greater than 6 which means your canvas element will be overwritten by your document.writeln().

Thread Thread
 
calinbaenen profile image
Calin Baenen •

It wasn't overriden, though, it just stayed black (which was the default color I gave it).

Thread Thread
 
ducaale profile image
Mohamed Dahir •

Did you set the color through CSS? In that case, may I see your CSS file?

Thread Thread
 
calinbaenen profile image
Calin Baenen •

I set the color using inline (element) styling.