I am making a news ticker that converts text strings into graphic letters. The letters are drawn using a canvas. The function that creates the letters works perfectly except for one thing: It can't handle spaces in the strings that I pass to it.
Here is the function for converting the strings to their graphical forms:
function conv_string(str) {
for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i).toLowerCase());
make_letter(str.charAt(i).toLowerCase(), i);
}
}
conv_string('New Brushes');
This function is pretty simple, it just takes each character in a string and passes it to another function (make_letter();), along with that character's position in the string. Right now, it will render the word "new" correctly, however it stops when it gets to the space. The make_letter(); function works fine. Here is the current fiddle.
Here is the make_letters(); function:
function make_letter(letter, pos) {
var c = document.getElementById("myCanvas");
var context = c.getContext("2d");
var w = parseInt(getComputedStyle(c).width);
var h = parseInt(getComputedStyle(c).height);
var full = Math.floor(h / 16);
var gap = 0.65;
var unit = full - gap;
var capH = (full * 5) - gap;
var inv = {
a: [
[0, 2],
[1, 1],
[1, 3],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[2, 4],
[3, 0],
[3, 4],
[4, 0],
[4, 4]
],
b: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[3, 4],
[4, 0],
[4, 1],
[4, 2],
[4, 3]
],
c: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
d: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 4],
[4, 0],
[4, 1],
[4, 2],
[4, 3]
],
e: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[4, 0],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
f: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[4, 0]
],
g: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[2, 0],
[2, 2],
[2, 3],
[2, 4],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
h: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[2, 4],
[3, 0],
[3, 4],
[4, 0],
[4, 4]
],
i: [
[0, 1],
[0, 2],
[0, 3],
[1, 2],
[2, 2],
[3, 2],
[4, 1],
[4, 2],
[4, 3]
],
j: [
[0, 4],
[1, 4],
[2, 4],
[3, 4],
[4, 3],
[4, 2],
[3, 1],
[2, 1]
],
k: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[2, 1],
[2, 2],
[1, 3],
[3, 3],
[0, 4],
[4, 4]
],
l: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
m: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[1, 1],
[2, 2],
[1, 3],
[0, 4],
[1, 4],
[2, 4],
[3, 4],
[4, 4]
],
n: [
[0, 0],
[1, 0],
[2, 0],
[3, 0],
[4, 0],
[1, 1],
[2, 2],
[3, 3],
[0, 4],
[1, 4],
[2, 4],
[3, 4],
[4, 4]
],
o: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
p: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[4, 0]
],
q: [
[0, 1],
[0, 2],
[0, 3],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 3],
[3, 4],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
r: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[1, 4],
[1, 0],
[2, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 0],
[3, 3],
[4, 4],
[4, 0]
],
s: [
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 0],
[2, 1],
[2, 2],
[2, 3],
[3, 4],
[4, 3],
[4, 2],
[4, 1],
[4, 0]
],
t: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 2],
[2, 2],
[3, 2],
[4, 2]
],
u: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 0],
[3, 4],
[4, 1],
[4, 2],
[4, 3]
],
v: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 4],
[3, 1],
[3, 3],
[4, 2]
],
w: [
[0, 0],
[0, 4],
[1, 0],
[1, 4],
[2, 0],
[2, 2],
[2, 4],
[3, 0],
[3, 1],
[3, 3],
[3, 4],
[4, 0],
[4, 4]
],
x: [
[0, 0],
[1, 1],
[2, 2],
[3, 3],
[4, 4],
[0, 4],
[1, 3],
[3, 1],
[4, 0]
],
y: [
[0, 0],
[1, 1],
[2, 2],
[3, 2],
[4, 2],
[1, 3],
[0, 4]
],
z: [
[0, 0],
[0, 1],
[0, 2],
[0, 3],
[0, 4],
[1, 3],
[2, 2],
[3, 1],
[4, 0],
[4, 1],
[4, 2],
[4, 3],
[4, 4]
],
exc: [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
spc: []
};
for (var i = 0; i < inv[letter].length; i++) {
var x = inv[letter][i][1] * full;
var y = inv[letter][i][0] * full;
if (pos == 0) {
var xpos = x;
} else {
var xpos = x + ((pos * full) * 5) + (full * pos);
}
context.beginPath();
context.rect(xpos, y, unit, unit);
context.fillStyle = 'black';
context.closePath();
context.fill();
}
}
I believe the problem lies with how charAt is handling the spaces. As you can see I've tried to log the value returned from charAt(); in the console, however when it finds the space, it just returns a blank space. How can I get a real, tangible value from this string when it finds a space?
If you take a look at the make_letter(); function, you'll see it relies on a comparison from the values it receives from the charAt();. Thus if a space is encountered, I need to be able to compare it to values I have set in an object, but how do you compare a blank space against another value? Is there something else besides charAt(); that I should be using?
I believe the problem lies with how
charAtis handling the spaces. As you can see I've tried to log the value returned fromcharAt();in the console, however when it finds the space, it just returns a blank space.
Yes, that's it's job. charAt gives you the character at a given position.
How can I get a real, tangible value from this string when it finds a space?
You can use charCodeAt to get the character code.
Thus if a space is encountered, I need to be able to compare it to values I have set in an object, but how do you compare a blank space against another value?
There's nothing special about comparing spaces. However, there is something special about using a space as a property name, as you may want to in your inv object. At the end you have:
spc: []
...which creates a property with the name spc. Which isn't, of course, the same as a space. You can create a property with a space if you like:
" ": []
Similarly, nothing charAt gives you will ever match this:
exc: [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
I don't know what exc is meant to be, but if it's !, then:
"!": [
[0, 2],
[1, 2],
[2, 2],
[4, 2]
],
You can use any string as a property name in an object initializer, you just have to put it in quotes.