Whenever I try to draw a custom image in JS, it doesn't draw anything, when I try to log X
or Y
in the loop, it returns normal values, when I log the color, it's perfectly normal.
So, why won't it draw anything?
const text = `Example`;
const makeColor = function makeColor(input, maxX=Infinity, maxY=Infinity) {
let X = 0;
let Y = 0;
let peakX = -1;
let peakY = -1;
if(maxX < Infinity) maxX;
const encode = function encode(input) {
let estr = "";
for(const chara of input) {
estr += String(Number(chara.charCodeAt(0), 16));
}
return estr;
};
const colors = [];
let color = "";
let itr = 0;
for(const chara of encode(input)) {
color += chara;
if(color.length >= 6) {
itr += 1;
colors.push(color);
document.writeln(itr+": "+color+"<br/>");
color = "";
}
}
if(color.length < 6 && color.length > 0) {
color += "0".repeat(6-color.length);
colors.push(color);
document.writeln(color+"<br/>");
color = "";
}
Object.freeze(colors);
try {
const canvas = document.getElementById("result");
const ctx = canvas.getContext("2d");
try {
for(const color of colors) {
console.log(X, Y);
ctx.fillStyle = "#"+color;
if(X > maxX) {
if(peakX <= -1 || X > peakX) peakX = X-1;
X = 0; Y++; ctx.fillRect(X, Y, 1, 1); X++; continue;
}
if(Y > maxY) break;
ctx.fillRect(X, Y, 1, 1); X++;
}
if(maxX >= Infinity) peakY = 1;
canvas.style.width = canvas.width = peakX;
canvas.style.height = canvas.height = peakY;
} catch(err) {throw new Error();}
} catch(err) {console.error("Could not draw image!");}
};
makeColor(text, 30);
Top comments (13)
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.
I take back my comments about
document.writeln()
. Your problems seem to stem from the following:peakX
andpeakY
which equal-1
;PeakX
andPeakY
were not negative 1,Peak*
changes once Axis is greater than PeakAxis, meaning something went wrong.Also, I didn't upscale the pixels because I wanted a 1:1 image.
Nevermind. Why is
peakX
andpeakY
behaving strangely?Can you show the whole code? right now, there are a couple of variables missing. Btw, you don't have to use
try/catch
until it is absolutely necessary.