What's up peeps.

Even though this isn't really about gaming, it's about programming, and I need help, so I'd assume this goes here.

Recently I've been learning HTML5, and have been having a fun time doing it. recently, though, I ran into a little trouble with drawing on a canvas.

I was working on making a logo for my website (at the bottom), except a monochrome version. I had originally written it as four separate canvases (hence the four colors shown), but decided that it didn't look the neatest, and so I tried to write a monochrome, single canvas version. The only problem I ran into (which was a rather troubling problem) was that the entire content of the drawing was filled, and I can't figure out how to fix it. I ran into this a few times while coding, but tried my best to fix it by completing the shape and running it around again, and it worked until I started getting halfway and then completed it. I suppose the started point was filling in everything to the last point, but that's not really what I'm looking for... (if you're wondering, I'm hoping to make space inbetween each of the four shapes, as well as the design for the four shapes.)

What the final product looks like

The code:

(Ignore the +25 to the height, that's to fix a different problem that I had with centering the drawing on a DIV. I copied the code over directly from the original document.)

Error 12204950: Browser does not support HTML5 Canvas element

So, is there any way to fix this? Is there any way to do this without making four canvases?

I can't say that I've ever used any of this code, but I think I understand what's going on.

Perhaps you should try using "cxt.fill()" more than once. Also, I only see you using "cxt.moveTo(x)" once, but you want your final design to have four shapes.

Once again, I may (probably) have this completely wrong, as I've never used JavaScript, but perhaps you should tell it to draw the first shape, then fill:

//This draws the top-left shape, I believe

cxt.moveTo(50,25);
cxt.lineTo(50,75);
cxt.lineTo(0,75);
cxt.lineTo(0,125);
cxt.lineTo(100,125);
cxt.lineTo(100,25);
cxt.lineTo(50,25);

//Then stop, and add this

cxt.fill();
cxt.moveTo(102,25);

Hopefully this helps!
//And continue on, until the next shape is complete

Yes! I tried this in Dreamweaver, and that was the problem! Try using this code, it works!

Error 12204950: Browser does not support HTML5 Canvas element

Perhaps you should try using "cxt.fill()" more than once. Also, I only see you using "cxt.moveTo(x)" once, but you want your final design to have four shapes.

Humm, I think I tried that once before, but I can't remember if it worked. I shall try.

... Yes, it seems to have worked! Thank you very much.

Final result

Yeah! That's awesome! Now, there's a problem I ran into when fiddling with trying to do the multiple color thing... You may have to create more than one cxt variable, because using "cxt.fill()" fills everything with the current style color, even if it's already filled... D:

Just out of curiosity, does anybody know how to get four different colors on a canvas, with the code above? I tried adding a fillStyle='#'; by each section, but that didn't really work. I also tried using a variable for the color value, but didn't get very far.