DEV Community

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

View post

Replies for: 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
 
baenencalin 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
 
baenencalin profile image
Calin Baenen •

I set the color using inline (element) styling.