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

Does anyone know how to position a <canvas> element?

I want to put all the circles against the left:

I can't find anything that states how to place the element in a specific position, and it seems plain wrong to use <div>.

If you are interested, here is the code. Took me all damn day to get this one to work. The information is quite sparse and scattered to boot.

Anyways, I am collecting a bunch of resources right now. I'll begin a log in about one week with all the great stuff (read: links that are beyond my head) I found.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="web.css" />
</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">
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">
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>

</body>
</html>

I don't think that the doctype accepts styles in the head, so here is the stylesheet:

I know there are like 15 ways to write image links, but this is the ONLY way to write it so that it works. Standards FTL?

Code:

body
{
background-image:url('http://i218.photobucket.com/albums/cc208/davidtoomey/smallblot.jpg');
}

Quote

04-26-2011 , 07:36 AM

#202

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

That person does not exist. That company doesn't really know what they want. They just made a list of buzzwords and put them in the job listing. This is no different than people who do the same with their resume. It is very easy to see through with a few questions and is counter productive.

What the hell, API isn't even a thing. It's an abstract concept that applies to all forms of programming.

Quote

04-26-2011 , 07:48 AM

#203

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

I think people do exist like that if they've been doing it a while, but he quality of the advert is bad like Irish said, also separating HTML, HTML5 is pretty stupid because if you know HTML5 you know HTML. Should just list HTML5.

Quote

04-26-2011 , 10:32 AM

#204

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 36,255

Being an expert in one of PHP/Rails/Python, and being passably familiar with the other two is nothing impressive. If you do web development, you almost have to know Javascript, HTML & CSS, which also includes a JS framework (which is usually jQuery).

It's not really that outrageous to have most of that list on your resume.

EDIT: lol new page. I rarely see the mix of open source (PHP/Rails) and MS techs on the same job ad, and I look at a lot. That's a strange combination of skills, but one or the other isn't.

Quote

04-26-2011 , 10:53 AM

#205

ChazDazzle

adept

Join Date: Aug 2005 Posts: 947

Quote:

Originally Posted by Zurvan

Yeah, the list looks way more absurd than it actually is. Though I'm not really sure why there is such a fetish among employers in applicants knowing tons of languages.

Quote

04-26-2011 , 11:36 AM

#206

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

They will get a bunch of low quality applicants who think they know everything when they dont. I saw a similar advert for a local web design company round here, paying £9 p/h which is terrible for what they were asking for.

Quote

04-26-2011 , 12:18 PM

#207

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 36,255

Frankly, I'm glad places put out job ads like that. It lets you know who to avoid.

Quote

04-26-2011 , 12:51 PM

#208

wellju

BSOD and racetrack Ninja

Join Date: Feb 2010 Posts: 5,247

Really noticeable is that this coding superstar does not need to know the iOS/Android SDK but has to use an iPhone, iPad and android phone at the same time.

He's also not only a hardcore coder, but a very talented graphics artist.

How is someone with 2 years of experience supposed to know php3/4/5 and most importantly why?
I don't have much idea about web development, but afaik php3 and 4 are ancient and just gone?

Quote

04-26-2011 , 02:26 PM

#209

clowntable

Carpal \'Tunnel

Join Date: Jun 2006 Posts: 45,557

Quote:

Certifications a huge plus

I stopped reading, sorry

Quote

04-26-2011 , 05:23 PM

#210

goofyballer

Carpal \'Tunnel

Join Date: Jun 2005 Posts: 70,719

Quote:

Originally Posted by TheIrishThug

What the hell, API isn't even a thing. It's an abstract concept that applies to all forms of programming.

I was talking to some chick (works at a design firm, not a tech person but works with a couple or something) recently who asked what language I work in, I told her "C" and she said "oh, is that like SaaS?"

facepalm

Quote

04-26-2011 , 05:25 PM

#211

anononon

Guest

Posts: n/a

I am going to get started with Ruby/Rails development. Heroku looks pretty sweet to test some basic apps. Anyone have experience with them?

Quote

04-26-2011 , 06:04 PM

#212

Neil S

King of the sidebar

Join Date: Sep 2004 Posts: 19,637

I promised myself years ago that I would never again host websites where I don't have root.

Quote

04-26-2011 , 06:13 PM

#213

anononon

Guest

Posts: n/a

Fair enough.

On an unrelated note, Google is actively hunting down people who provide mass geolocation scripts / online services. If anyone needs this service, I just wrote a PHP script that updates [your] database of addresses with geolocated coordinates. It is suitable to call with cron on a regular basis, as it checks the DB for new records and updates only those records.

With some simple mods you can easily have it check a timestamped field so when someone changes their address using your CRUD interface, it'll check that record too. I'll probably do that myself soon. If you want the script, shoot me a PM. I'm going to post it to GitHub shortly but figured I'd let people know here.

Quote

04-26-2011 , 09:02 PM

#214

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Zurvan

Frankly, I'm glad places put out job ads like that. It lets you know who to avoid.

Yeah, I always wondered how that search went for these guys.

I also wonder how many of these guys got burned because some slick joe talked them into a contract. Many of those ads seem to be updated later with

NO FLAKES!!!!!

--------------------------

So no one knows how to position a <canvas> element? Ugh. I guess I'll use <div> for now, but that completely screws up the idea for the page. I am sure there is a js or something..?

Quote

04-26-2011 , 09:14 PM

#215

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,146

don't you just position them with CSS as you would any other element of a page? I dunno, haven't ever used a canvas yet...

Quote

04-26-2011 , 09:14 PM

#216

anononon

Guest

Posts: n/a

No F idea how to use canvas. Front end work =

Quote

04-26-2011 , 09:19 PM

#217

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 36,255

Canvas/HTML5/CSS3 is somewhere on my very long list of "stuff I want to learn about"

Instead, I post on 2+2 and watch hockey.

Quote

04-26-2011 , 10:19 PM

#218

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Does this question help?

http://stackoverflow.com/questions/1...ering-a-canvas

Quote

04-27-2011 , 03:05 AM

#219

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by _dave_

don't you just position them with CSS as you would any other element of a page? I dunno, haven't ever used a canvas yet...

Not sure, really. Unfortunately, canvas doesn't have margins or buffers or anything like that, so it's not like any other element.

The best solution I came up with, and I feel like a filthy vermin: inline style.

The StackOverflow is pretty nifty, but it's not quite what I need. I copy/pasted the code and the image is centered in the canvas. I think the OP was about centering the actual canvas, but that's not the answer he got, unfortunately.

I think the problem is here:

Code:

var canvasWidth = viewportWidth * C;
    var canvasHeight = canvasWidth / W_TO_H;
    el.style.position = "fixed";
    el.setAttribute("width", canvasWidth);
    el.setAttribute("height", canvasHeight);
    el.style.top = (viewportHeight - canvasHeight) / 2;
    el.style.left = (viewportWidth - canvasWidth) / 2;

The last two lines seem to describe how long to draw the line, not where to draw the line.

Unfortunately, my js solutions didn't work.

I tried:

Code:

el.style.position.left=300px;
el.style.position= "left: 300px";    // Yes, that is desperate, I know.

There doesn't seem to be any positioning codes for js: only how to find the position of an element in a DOM tree.

Last edited by daveT; 04-27-2011 at 03:13 AM. Reason: deleted embarrassing code bit.

Quote

04-27-2011 , 03:09 AM

#220

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by kyleb

No F idea how to use canvas. Front end work =

I don't know: in the sad world of web programming, I feel less said doing front end.

Of course, I don't know the first thing about back end work. echo?

Quote

04-27-2011 , 04:02 AM

#221

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,146

This one's maybe more relevant? http://stackoverflow.com/questions/5...ent-attributes

Quote

04-27-2011 , 05:01 AM

#222

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by _dave_

This one's maybe more relevant? http://stackoverflow.com/questions/5...ent-attributes

I need to lurk more in this site. This is also good information to know for later use. whatwg is also very useful.

I think I figured out the issue:

Basically, all elements, classically speaking, are set at a default by the browsers. A <div>, or <p>, or whatever is going to begin at the left and expand all the way to the right causing all the elements to stack from top to bottom. For some reason, the browsers don't interpret canvas this way. While I was expecting the <canvas> images to act this way, they ended up "stacking" along the x axis opposed to the y axis as it would with a <div> or <p> element.

This guy explains why elements behave the way they do far better than I can, with total nerd explanations:

Google HTML/CSS/Javascript from the Ground Up Class: CSS Walkthrough:
http://www.youtube.com/watch?v=_mgyf...layer_embedded

I think the way that <canvas> is interpreted is why the external or head style sheets don't work (or it could be because I suck at coding, you decide).

BUT!!!!!

2+2 is the only place you will learn this.

--------------------------------------------------

Continuing on with this project, opacity is an interesting concept. I sort of enjoy screwing with it, though the code piece is sort of mystifying:

The code for opacity is as follows:

Code:

filter:alpha(opacity=10);
opacity:0.75;

Create the alpha opacity to whatever you want, then punch in a bunch of numbers in opacity and see what happens. I don't know why they bothered with creating the alpha value. Would it be that painful to just call it "100" by default and use numbers 1-100 as valid in opacity?

The code is 121 lines long. Hopefully that isn't too obfuscated. I'm not using any shorthand.

Quote

04-27-2011 , 05:03 AM

#223

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

I won't clutter up the NC thread with this anymore. I'll start a thread soon.

Quote

04-27-2011 , 10:25 AM

#224

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

You seem to be creating an entire website in an HTML5 canvas, I would be very careful doing this as there are a lot of drawbacks, a lot of the things you want to do could probably be done in CSS/Jquery.

Quote

04-27-2011 , 12:23 PM

#225

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 36,255

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.

Quote

Page 9 of 1603

First

4 5 6 7 8 9 10 11 12 13 14 19 29 59 109 209 509 1009

Last

Post Reply Subscribe

...

Page 9 of 1603

First

4 5 6 7 8 9 10 11 12 13 14 19 29 59 109 209 509 1009

Last