** UnhandledExceptionEventHandler :: OFFICIAL LC / CHATTER THREAD ** - Page 10 - Computer Technical Help

At the job interview I mentioned earlier we spent a fair bit of time talking about Canvas, and one of the things they pointed out is that it really suffers on performance if you get even a moderate number of moving parts in there.

Canvas is still quite a new technology, but the latest browsers really do render it nicely and reasonably well, in our tests IE9 actually comes out top followed closely by Chrome.

However, in tests we did with a simple game in Direct X and the same game in canvas (not the most scientific test we know), canvas runs around 8x slower, which shows there is a lot of room for improvement. But it's being improved all the time and I expect that gap to close really quickly.

Quote

04-27-2011 , 06:48 PM

#227

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

The entire page is not ran in canvas. The only part that is canvas is the circles. The main is just <div> with some CSS attributes. The only part that is new to CSS3 is the opacity and curvature on the border.

Canvas is an undiscovered territory, but that is partly because it is new and no one is familiar with it, and also because it is tied into js, which few people are really good at anyways. The fact that no one can tell you how to position a canvas is proof of how little is known about canvas. I could have used a <div> around the <canvas> element, but I wanted to be sure there was no other solutions.

The meat of the code is very basic (outside of canvas, obv):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">
body
{
background-image:url('http://i218.photobucket.com/albums/cc208/davidtoomey/smallblot.jpg');
}

#main
{
position:absolute;
top:5em;
left:20em;
right:5em;
background-color:blue;
color:white;
border-style:solid;
border-width:10px;
border-color:black;
filter:alpha(opacity=10);
opacity:0.75;
border-opacity:1;
border-radius:100px;
padding:2em;
}

span
{
word-wrap:normal;
}
</style>
</head>
<body>

<canvas id="thisCanvas" width="200" height="200">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("thisCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Music", 100, 110);

</script>

<canvas id="secondCanvas" width="200" height="200" style="position: absolute; left: .5em; top: 10em;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("secondCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Writing", 100, 110);

</script>

<canvas id="thirdCanvas" width="200" height="200" style="position: absolute; left: .5em; top: 20em;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">

var c=document.getElementById("thirdCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText("Web", 100, 110);

</script>

<div id="main">
<span>

<h1> WELCOME </h1>

<p>I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words. I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words. I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.I'll tell you this in so many words.</p>

</span>
</div>

</body>
</html>

Of course, there is much to be said and discovered about the rules governing <!DOCTYPE html>, which is a stumbling block that will cause you to pull your hair out. Then again, I like the strong enforcement of rules: I get very sad when I see a site created in HTML4.0 transitional and see the same thing described 15 different ways, which is all too common.

Instead of writing "Your browser doesn't support canvas," I should write: "get a real browser <here>, meng!"

Quote

04-27-2011 , 07:56 PM

#228

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,146

it seems like a function to draw those round canvases may be preferable to copy/pasting the same code 3 times changing only a couple of words, e.g.

[php]
<script type="text/javascript">
function makeButton(canvasId, buttonText)
{
var c=document.getElementById(canvasId);
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#0000FF");
grd.addColorStop(1,"#000000");
cxt.fillStyle=grd;
cxt.beginPath();
cxt.arc(100,100,50,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
cxt.font = "italic 2em sans-serif";
cxt.fillStyle = "red";
cxt.textAlign = "center";
cxt.fillText(buttonText, 100, 110);
}

makeButton("thisCanvas", "Music")
makeButton("secondCanvas", "Writing")
makeButton("thirdCanvas", "Web")

</script>
[/php]
untested and edited straight in the 2p2 edit box so use at your own risk!

also good idea to try and be consistent when naming things, thisCanvas -> secondCanvas -> thirdCanvas =

Last edited by _dave_; 04-27-2011 at 08:06 PM. Reason: indentation nit

Quote

04-27-2011 , 08:02 PM

#229

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Use an array of canvases

Quote

04-27-2011 , 09:02 PM

#230

RoundTower

ɹǝʍoʇpunoɹ

Join Date: Feb 2005 Posts: 14,563

I have a small website (just a collection of ~10 static handwritten HTML pages) but I'm thinking of adding some more functionality.

In particular it hosts a chess rating list. Instead of that just being one page with a long list of chess players, I'd like it to be searchable/sortable/queryable/maybe graphable. I'd also like to have other useful stuff like: have the front page display the most recent 5 news items/articles.

What do I need for this? I have basically no experience in Web development, PHP, Javascript, etc. Do I need a "web framework"? I barely understand what that is. If so, does it matter what one? I have a preference for something written in Python as all the code that generates the underlying database is written in Python, but would learn to do it in Ruby or Javascript or whatever if that is really so much better for this purpose.

Quote

04-27-2011 , 10:28 PM

#231

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,146

I'd probably use some JQuery scripts to do this - here's an example of TableSorter & QuickSearch together:
http://beckelman.net/demos/jqueryTab...h/default.aspx

and just tablesorter (much easier to see what's going on): http://tablesorter.com/docs/example-option-digits.html

That gets you search and sort for free very little effort.

Quote

04-27-2011 , 10:29 PM

#232

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Hey, I'm creating a thread right now. I can go ahead and copy/paste everything, or perhaps mod can move the stuff?

Good stuff _dave_. Let me test it and see what happens.

Quote

04-27-2011 , 10:31 PM

#233

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,146

can move it all easy, will do now.

ETA: here you go: DaveT HTML5 + Canvas Learning Log

Last edited by _dave_; 04-27-2011 at 10:38 PM.

Quote

04-27-2011 , 10:50 PM

#234

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Oh, man. I created a mess. There are two threads now.

......

Quote

04-27-2011 , 10:58 PM

#235

jukofyork

Carpal \'Tunnel

Join Date: Sep 2004 Posts: 11,749

Quote:

Originally Posted by daveT

Oh, man. I created a mess. There are two threads now.

......

I copied your newly created OP from your new thread into the OP of the merged thread _dave_ created and at the end I copied (in quotes) the original post you made that spawned the thread (hopefully this is OK, but if not then PM one of us mods or post here again and we can sort it out better):

http://forumserver.twoplustwo.com/19...-logs-1028801/

Juk

Quote

04-27-2011 , 11:24 PM

#236

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Ah, thank you.

I would have done it the exact same way.

Quote

04-28-2011 , 03:15 AM

#237

anononon

Guest

Posts: n/a

Anyone here use FANN or Tremani for PHP neural net operations? Would love some help.

Quote

04-28-2011 , 11:39 PM

#238

kerowo

lolcat

Join Date: Nov 2005 Posts: 37,190

Anyone set up triggers from splunk? Any good tutorials out there?

Quote

05-03-2011 , 11:48 AM

#239

spike420211

banned

Join Date: Jun 2007 Posts: 9,509

IPv6:
http://www.engineeringtv.com/video/ARIN-Deploy-IPv6
OK, so it's not peak oil panic LOL.
But, any NEW internet poker interface is going to have this.
Does/does not start a trainwreck?

[now u know why i put it in LC...]

Quote

05-03-2011 , 05:33 PM

#240

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

I'm trying to write my own Jquery event to HTML plugin what do you guys think so far

http://69.24.73.172/demos/eventml/default.htm

It's like syntax highlighter only for events (a niche way of writing programs) The HTML format is really hard to get right though which is what I'm working on now

Also, does anyone know how to make a perma link to each of these boxes? They can appear on any webpage, any domain multiple instances per page, it would be nice to have some sort of generic way to have a perma link to them but I can't figure out how, not sure if it's possible.

Quote

05-04-2011 , 08:21 AM

#241

Johnny Douglas

Carpal \'Tunnel

Join Date: Apr 2008 Posts: 8,480

2p2 raps are better imo:

http://techcrunch.com/2011/05/03/bal...8TechCrunch%29

Quote

05-04-2011 , 08:42 AM

#242

MrWooster

veteran

Join Date: Mar 2007 Posts: 2,984

Quote:

Originally Posted by Johnny Douglas

2p2 raps are better imo:

http://techcrunch.com/2011/05/03/bal...8TechCrunch%29

Not bad actually. Seiborg has to top it tho!

Quote

05-04-2011 , 08:56 AM

#243

Johnny Douglas

Carpal \'Tunnel

Join Date: Apr 2008 Posts: 8,480

Quote:

Originally Posted by MrWooster

Not bad actually. Seiborg has to top it tho!

This was always my favourite CS related rap:

http://www.youtube.com/watch?v=9FfcqkOpaco

"I'm out this bitch... close braces"

Quote

05-04-2011 , 10:09 AM

#244

jukofyork

Carpal \'Tunnel

Join Date: Sep 2004 Posts: 11,749

I moved the posts about GIT into the existing "What's your revision control system of choice?" thread.

Please continue the discussion in there

Juk

Quote

05-04-2011 , 10:27 AM

#245

MrWooster

veteran

Join Date: Mar 2007 Posts: 2,984

Quote:

Originally Posted by jukofyork

I moved the posts about GIT into the existing "What's your revision control system of choice?" thread.

Please continue the discussion in there

Juk

Thanks. Makes more sense in revision control.

Quote

05-05-2011 , 11:56 AM

#246

jukofyork

Carpal \'Tunnel

Join Date: Sep 2004 Posts: 11,749

I moved the posts WP discussion into a new thread: "What do you guys think of WordPress?".

Please continue the discussion in there.

Juk

Quote

05-06-2011 , 01:01 AM

#247

anononon

Guest

Posts: n/a

http://www.raspberrypi.org/

$25 USB computer. USB for keyboard, 12 megapixel camera attached, HDMI (1080p!) port for graphics. So awesome.

Quote

05-06-2011 , 01:17 AM

#248

Neil S

King of the sidebar

Join Date: Sep 2004 Posts: 19,645

Quote:

Originally Posted by jukofyork

I moved the posts WP discussion into a new thread: "What do you guys think of WordPress?".

Please continue the discussion in there.

Juk

Nice work with the breakouts.

Quote

05-06-2011 , 01:18 AM

#249

Neil S

King of the sidebar

Join Date: Sep 2004 Posts: 19,645

Quote:

Originally Posted by kyleb

http://www.raspberrypi.org/

$25 USB computer. USB for keyboard, 12 megapixel camera attached, HDMI (1080p!) port for graphics. So awesome.

We are living in the future.

It's so sick what you can get these days. I mean, a bottom of the line toy iMac is a quad core machine with 1TB of storage and a huge screen.