Forums

HTML5/Js help?

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.)

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

What's up peeps.\r\n\r\nEven though this isn't really about gaming, it's about programming, and I need help, so I'd assume this goes here.\r\n\r\nRecently 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.\r\n\r\nI 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.)\r\n\r\n[url=http://projjeol.eu.pn/h5/drawing.html]What the final product looks like[/url]\r\n\r\nThe code:\r\n\r\n[i](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.)[/i]\r\n\r\n[quote]<canvas id="logodraw" width="202" height="227">Error 12204950: Browser does not support HTML5 Canvas element</canvas>\r\n\r\n<script type="text/javascript">\r\n\r\nvar c=document.getElementById('logodraw');\r\nvar cxt=c.getContext('2d');\r\ncxt.fillStyle='#222a2c';\r\ncxt.moveTo(50,25);\r\ncxt.lineTo(50,75);\r\ncxt.lineTo(0,75);\r\ncxt.lineTo(0,125);\r\ncxt.lineTo(100,125);\r\ncxt.lineTo(100,25);\r\ncxt.lineTo(50,25);\r\ncxt.lineTo(50,75);\r\ncxt.lineTo(0,75);\r\ncxt.lineTo(0,125);\r\ncxt.lineTo(100,125);\r\ncxt.lineTo(100,25);\r\ncxt.lineTo(102,25);\r\ncxt.lineTo(102,75);\r\ncxt.lineTo(152,125);\r\ncxt.lineTo(202,125);\r\ncxt.lineTo(202,75);\r\ncxt.lineTo(152,25);\r\ncxt.lineTo(102,25);\r\ncxt.lineTo(102,75);\r\ncxt.lineTo(152,125);\r\ncxt.lineTo(202,125);\r\ncxt.lineTo(202,127);\r\ncxt.lineTo(202,227);\r\ncxt.lineTo(102,227);\r\ncxt.lineTo(102,177);\r\ncxt.lineTo(152,177);\r\ncxt.lineTo(152,127);\r\ncxt.lineTo(202,127);\r\ncxt.lineTo(202,227);\r\ncxt.lineTo(102,227);\r\ncxt.lineTo(100,227);\r\ncxt.lineTo(0,227);\r\ncxt.lineTo(0,127);\r\ncxt.lineTo(50,127);\r\ncxt.lineTo(50,177);\r\ncxt.lineTo(100,177);\r\ncxt.lineTo(100,227);\r\ncxt.lineTo(0,227);\r\ncxt.lineTo(0,127);\r\ncxt.lineTo(0,125);\r\ncxt.lineTo(100,125);\r\ncxt.lineTo(100,25);\r\ncxt.fill();\r\n\r\n</script>[/quote]\r\n[img]http://img51.imageshack.us/img51/4103/logolds.jpg[/img]\r\n\r\nSo, is there any way to fix this? Is there any way to do this without making four canvases?

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

I can't say that I've ever used any of this code, but I think I understand what's going on.\r\n\r\nPerhaps 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.\r\n\r\nOnce 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:\r\n\r\n[quote]\r\n//This draws the top-left shape, I believe\r\n\r\ncxt.moveTo(50,25);\r\ncxt.lineTo(50,75);\r\ncxt.lineTo(0,75);\r\ncxt.lineTo(0,125);\r\ncxt.lineTo(100,125);\r\ncxt.lineTo(100,25);\r\ncxt.lineTo(50,25);\r\n\r\n//Then stop, and add this\r\n\r\ncxt.fill();\r\ncxt.moveTo(102,25);\r\n[/quote]\r\n\r\nHopefully this helps!\r\n//And continue on, until the next shape is complete

[quote]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.[/quote]\r\nHumm, I think I tried that once before, but I can't remember if it worked. I shall try.\r\n\r\n... Yes, it seems to have worked! Thank you very much.\r\n\r\n[url=http://projjeol.eu.pn/h5/drawfinal.html]Final result[/url]

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:

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.

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.

Flip a Coin...

Play free online games at Armor Games!

We strive to deliver the best online games experience on the internet, with thousands of free online games for kids, access to free mmorpg games, free online games for girls, online rpg games, fun online flash games, and more. We offer free flash games in many different genres: online shooting games, online puzzle games, online war games, free online car games, free online hidden object games and dozens more. This is the best place on the web to play online games for free... play on Armor Games! No matter what game style you prefer, we've got it here.

As one of the biggest free gaming websites, we offer thousands of new game reviews and ratings, making it easy for gamers to find new games every day. We offer only the best games from developers Jmtb02, Krin, ConArtist, Joey Betz, Tony Lavell, Louissi, Gameinabottle and of course Armor Games develops some of the best games around.

About Armor Games (ArmorGames.com, Armour Games, or Armored Games)

We are dedicated to providing our players the best online gaming experience on the internet! Visit every day to discover new games, achieve high scores, and participate in one of the most active gaming communities.

Submit a Game

Have your game played by millions of gamers! Armor Games welcomes game submissions from talented game developers. Not every game makes the cut, but if it does, we'll promote it on Armor Games and give you all the credit and link back to your site. Submit your game here and good luck!