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
constmakeColor=functionmakeColor(input,maxX=Infinity,maxY=Infinity){}// should be eitherconstmakeColor=(input,maxX=Infinity,maxY=Infinity)=>{}// orfunctionmakeColor(input,maxX=Infinity,maxY=Infinity){}
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
consttext=`Example`;// should be changed toconsttext='Example';// orconsttext="Example";
You don't have to freeze your objects. Just try to avoid methods that mutate objects.
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.
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().
Try to avoid
document.writeln()
since it deletes your existing HTML elements. If you need to debug your code, you can useconsole.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:
X
andY
should bex
andy
. This doesn't apply to constant which are uppercased e.gUPLOAD_SUCCESS
.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.In that case, you should be using
innerHTML
and notdocument.writeln()
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
let's say you had an HTML file like this:
as soon this line gets executed
your HTML will be converted to this:
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
Since you called the
makeColor()
function with the stringExample
, you would get the string"6912097109112108101"
. This string contains chars that are greater than 6 which means your canvas element will be overwritten by yourdocument.writeln()
.It wasn't overriden, though, it just stayed black (which was the default color I gave it).
Did you set the color through CSS? In that case, may I see your CSS file?
I set the color using inline (element) styling.