HTML 5 <canvas>

Shark · May 27, 2010

a little test I put together...

<div class='quotetop'>QUOTE </div>

<html>
<head>

<title>JavaScript, HTML5 and Canvas</title>

<script language="JavaScript">
function squares() {
var example = document.getElementById('canvas1');
var context = example.getContext('2d');

context.fillStyle = "rgb(255,0,0)"; //red square
context.fillRect(30, 30, 50, 100);

context.fillStyle = "rgb(0,255,0)"; //green square
context.fillRect(70, 70, 50, 50);

context.fillStyle = "rgb(0,0,255)"; //blue square
context.fillRect(110, 110, 50, 50);
}
</script>

</head>

<body>

JavaScript and HTML5 are a perfect match. Via javascript you can remove and add shapes using the Canvas element in HTML5.

Press the Test Me! button and watch the squares appear.</p>

<canvas id="canvas1" width="200" height="200" style="background-color:yellow">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

<input type="button" value="Test me!" onClick="squares();" />

</body>

</html>[/b]
Click to expand...

Guss_ · May 27, 2010

<div class='quotetop'>QUOTE (Butzie @ May 27 2010, 07:26 PM) <{POST_SNAPBACK}></div>

aaaaaaaaaaannnnd for those of you who don't speak nerd...

BOOBIES!

[/b]
Click to expand...

thanks, boobies are better

Cletus · May 27, 2010

<div class='quotetop'>QUOTE (Butzie @ May 27 2010, 05:26 PM) <{POST_SNAPBACK}></div>

aaaaaaaaaaannnnd for those of you who don't know what one plus one equals...[/b]
Click to expand...

Tonic · May 27, 2010

for you hockey <strike>fags</strike> fans

Shark · May 27, 2010

I hate you, butz... I knew you would spite me you fag...

art_Dent99 · May 28, 2010

My feeling exactly...

Shark · May 28, 2010

<div class='quotetop'>QUOTE (Butzie @ May 27 2010, 09:26 PM) <{POST_SNAPBACK}></div>

I don't have much else goin on Plus I totally owe you several.[/b]
Click to expand...

Shark · May 28, 2010

...top score...

Cletus · May 28, 2010

<div class='quotetop'>QUOTE (Butzie @ May 28 2010, 07:23 AM) <{POST_SNAPBACK}></div>

I think the internet gave stupid people a medium with which to communicate with other stupid people.[/b]
Click to expand...

One major project that is using <canvas> is Bespin. I put up a quick Bespin script on my site. Currently it is on Javascript highlighting with one of my Greasemonkey scripts.

Truckmuddr · May 28, 2010

Note... Link with only work with Firefox....

Cletus · May 28, 2010

...or Chrome, or Safari... but not IE.

FUZiON · May 28, 2010

says the dude with 8000 posts

IWazInYoMoM69 · May 31, 2010

lmao I am going to have to go with fuzzy on this one...

Log in or Sign up

HTML 5 <canvas>

Shark Getting the band back together... Staff Member Leader

Guss_ Ace Status

Cletus Guest

Tonic Ace Status UAN Member

Shark Getting the band back together... Staff Member Leader

art_Dent99 Guest

Shark Getting the band back together... Staff Member Leader

Shark Getting the band back together... Staff Member Leader

Cletus Guest

Truckmuddr M.I.A. Status

Cletus Guest

FUZiON I'm here to fix your sink Administrator

IWazInYoMoM69 Guest

Log in or Sign up

HTML 5 <canvas>

Shark Getting the band back together... Staff Member Leader

Guss_ Ace Status

Cletus Guest

Tonic Ace Status UAN Member

Shark Getting the band back together... Staff Member Leader

art_Dent99 Guest

Shark Getting the band back together... Staff Member Leader

Shark Getting the band back together... Staff Member Leader

Cletus Guest

Truckmuddr M.I.A. Status

Cletus Guest

FUZiON I'm here to fix your sink Administrator

IWazInYoMoM69 Guest

Useful Searches