DEV Community

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

Collapse
 
ducaale profile image
Mohamed Dahir • Edited

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 output to the console tab of chrome's devtools.

I also have a couple of comments about your coding style if you don't mind:

  • Try to use Prettier's playground to format your code. This way, it will be easier for others to read your code.
  • You don't have to declare your function names twice
const makeColor = function makeColor(input, maxX=Infinity, maxY=Infinity) {}
// should be either
const makeColor = (input, maxX=Infinity, maxY=Infinity) => {}
// or
function makeColor(input, maxX=Infinity, maxY=Infinity) {}
Enter fullscreen mode Exit fullscreen mode
  • By convention, variables should start with a lowercase letter e.g X and Y should be x and y. This doesn't apply to constant which are uppercased e.g UPLOAD_SUCCESS.
  • Don't use backticks unless you need string interpolation
const text = `Example`;
// should be changed to
const text = 'Example';
// or
const text = "Example";
Enter fullscreen mode Exit fullscreen mode
  • You don't have to freeze your objects. Just try to avoid methods that mutate objects.
Collapse
 
baenencalin profile image
Calin Baenen

Okay, maybe I should have specified what I meant by log-ed, as I removed the debug code. But still, come on, document.write()+ is NOT logging, it's WRITING.

Collapse
 
ducaale profile image
Mohamed Dahir

In that case, you should be using innerHTML and not document.writeln()

document.getElementById('some-id').innerHTML += color;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
baenencalin 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
 
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.