curves on canvas

**MartinRinehart@gmail.com** · Aug 21 '08, 03:05 PM

Re: curves on canvas

No answers. I'll take that for "no". Guess I'll have to write one.

**Thomas 'PointedEars' Lahn** · Aug 21 '08, 03:45 PM

Re: curves on canvas

MartinRinehart@ gmail.com wrote.

No answers.

It is Thursday/Friday. Some people here do have a job IRL.

Please learn to quote, and get a real name.

PointedEars
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

**Bart Van der Donck** · Aug 21 '08, 03:45 PM

Re: curves on canvas

MartinRineh...@ gmail.com wrote:

I'm drawing curves on a canvas. And then redrawing, re-redrawing, ...
>
Are there any tools that could help me draw in something more graphic
than the eight arguments of the Bezier curve?

There was a recent thread in this group which covered various possible
approaches:

http://groups.google.com/group/comp.lang.javascript/browse_frm/thread/bec556e6d8dbd61c/

Hope this helps,

--
Bart

**optimistx** · Aug 21 '08, 06:15 PM

Re: curves on canvas

Bart Van der Donck wrote:

MartinRineh...@ gmail.com wrote:
>

>I'm drawing curves on a canvas. And then redrawing, re-redrawing, ...
>>
>Are there any tools that could help me draw in something more graphic
>than the eight arguments of the Bezier curve?

>
There was a recent thread in this group which covered various possible
approaches:
>

http://groups.google.com/group/comp....556e6d8dbd61c/

>
Hope this helps,

Thanks, it is fun to see

http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm#performance

and his homepage with selfmade carbonfiber bike... a really admirable guy.

**MartinRinehart@gmail.com** · Aug 21 '08, 08:15 PM

Re: curves on canvas

Thanks Bart, but not the ticket. I'm using the <canvastag, which
works well per w3c pre-standard in Firefox, Opera, Safari and
Konqueror. Pretty good 2D drawing capability. A <canvaspentag on is a
simple matter of creating a five-point path and then reqesting a fill
operation. You could do a slick one with a separate linear gradient
for each point. 10-15 minutes to do it. Replace the straight lines
with Bezier curves - another 5-10 minutes.The problem: maybe half a
day futzing with JavaScript function coords to get one that really
looked good. <canvas>-specific paint program needed.

I don't really care about MSIE-only people (I'm too old to spend any
more time working around those bugs). There is a Google plug-in that
enables <canvasin MSIE. (Isn't DLing a decent browser easier?)

Zorn's stuff IS VERY cool. If you missed his drag-n-drop, go back and
take a look.

Pointed Ears: Full last name is Rinehart. You could try Google Groups
and click "view profile".

**Thomas 'PointedEars' Lahn** · Aug 21 '08, 08:35 PM

Re: curves on canvas

MartinRinehart@ gmail.com wrote:

Zorn's stuff IS VERY cool.

It might look cool in a few browsers, but on a closer look it is among the
worst script code I/we have ever seen here. We have even discussed the
flaws of it shortly (ago).

Pointed Ears:

It is spelled differently, you know.

Full last name is Rinehart. You could try Google Groups
and click "view profile".

Or you could stop acting like a googlodyte, click "Subscribe to this group"
and simply have your From header say so. (I have mentioned that before.)

PointedEars
--
var bugRiddenCrashP ronePieceOfJunk = (
navigator.userA gent.indexOf('M SIE 5') != -1
&& navigator.userA gent.indexOf('M ac') != -1
) // Plone, register_functi on.js:16

**MartinRinehart@gmail.com** · Aug 21 '08, 09:55 PM

Re: curves on canvas

Thomas 'PointedEars' Lahn wrote:

Pointed Ears:

>
It is spelled differently, you know.

Sorry, PointedEars. I've subscribed to other groups and gone back to
Google. If you know of a better, please suggest it.

All: The lawn needs mowing. This is a procrastination . Put it in your
non-MSIE browser.

<! pentagon.html - draw a slicked up pentagon>
<! copyright 2008, Martin Rinehart>

<html>
<head>
<titlePentago n! </title>

<script>

function draw() {

cnvs = document.getEle mentById( 'cnvs' );
var pen = cnvs.getContext ('2d');

var rg = pen.createRadia lGradient(
170, 180, 5, 202, 207, 170 );
rg.addColorStop ( 0, '#ffffff' );
rg.addColorStop ( 1, '#0000ff' );
pen.fillStyle = rg;

pen.beginPath() ;
pen.moveTo( 72, 153 );
pen.lineTo( 202, 41 );
pen.lineTo( 330, 153 );
pen.lineTo( 282, 339 );
pen.lineTo( 120, 339 );

pen.fill();

} // end of draw()

</script>
</head>

<body onload=draw()>
<center>

<hr width=80%>
<h1Pentagon with Off-Center Radial Gradient </h1>
<hr width=80%>

<canvas id=cnvs border=0 height=400 width=400>
Sorry. I'm too old to support MSIE.
</canvas>

</center>
</body>

</html>

<! end of pentagon.html>

**SAM** · Aug 22 '08, 11:45 AM

Re: curves on canvas

MartinRinehart@ gmail.com a écrit :

Thomas 'PointedEars' Lahn wrote:

>>Pointed Ears:

>It is spelled differently, you know.

Oh Yes ! right one is : OreillesPointée s

All: The lawn needs mowing. This is a procrastination . Put it in your
non-MSIE browser.
>
<! pentagon.html - draw a slicked up pentagon>
<! copyright 2008, Martin Rinehart>

works fine, but ...
that is not a (regular) pentagone.

--
sm

**MartinRinehart@gmail.com** · Aug 23 '08, 10:15 AM

Re: curves on canvas

SAM wrote:

works fine, but ...
that is not a (regular) pentagone.

You've sharp eyes. It's a pentagonal approximation.

To skip the math, I found a pentagon in Wikipedia and drew it as an
image in my canvas. Then I wrote lines over it and fiddled them to
cover the Wiki drawing. When they looked fairly pentagonish, I deleted
the image. If you shrink the second circle in the radial gradient, you
can get a good view of the errors.

bH · Aug 24 '08, 02:05 AM

Re: curves on canvas

On Aug 23, 6:13 am, MartinRineh...@ gmail.com wrote:

SAM wrote:

works fine, but ...
that is not a (regular) pentagone.

>
You've sharp eyes. It's a pentagonal approximation.
>
To skip the math, I found a pentagon in Wikipedia and drew it as an
image in my canvas. Then I wrote lines over it and fiddled them to
cover the Wiki drawing. When they looked fairly pentagonish, I deleted
the image. If you shrink the second circle in the radial gradient, you
can get a good view of the errors.

Hi All,
This is a testing tool to show a pentagon of various sizes and colors.
I am using IE and have not tested it using other browsers. The google
address
for drawing charts for this and other geometric shapes is:

Charts | Google for Developers

http://code.google.com/apis/chart/

Discover the resources for adding interactive charts for browsers and mobile devices.

JS sample code is:

<HTML><HEAD><TI TLE>Test Form 1</TITLE>
<META http-equiv=Content-Type content="text/html;
charset=windows-1252">
<META content="MSHTML 6.00.2800.1589" name=GENERATOR> </HEAD>
<BODY text=white bgColor=#0000aa <H1 align="center"> <FONT
face="comic Sans MS"><TR>



<head>
<title>Test a Pentagon Chart form</title>
<script language="JavaS cript">
function newUrl()
{
var inp1 = document.getEle mentById ("inp1");
var inp2 = document.getEle mentById ("inp2");
var inp3 = document.getEle mentById ("inp3");
var inp4 = document.getEle mentById ("inp4");
var inp5 = document.getEle mentById ("inp5");
var inp6 = document.getEle mentById ("inp6");
loc = inp1.value + "cht=" + inp2.value + "&chs=" +
inp3.value+"&ch d=" + inp4.value + "&chm=" + inp5.value + "&chf=" +
inp6.value;
//alert(inp);
window.location =loc;
}
</script>
<H2>Connect To Google Draw Chart for Testing Sizes and Colors of
Pentagons </H2></TR><TD>In these window
boxes change the values that represent lengths of sides and color
<BR><BR>

The html address start is: (DO NOT CHANGE THIS) &gt <input
maxLength=30 value="http://chart.apis.goog le.com/chart?" type="text"
id="inp1"/><BR>
A line mode selection is: (DO NOT CHANGE THIS) the "r" means radial
&gt<input maxLength=20 value="r" type="text" id="inp2"/><BR>
A overall size of frame is: (Change the lengths 400x400) &gt<input
maxLength=20 value="400x400" type="text" id="inp3"/><BR>
The lengths of sides are: (Change the lengths 70,70,70,70,70, 70 )
&gt<input maxLength=20 value="t:70,70, 70,70,70,70" type="text"
id="inp4"/><BR>
The color of pentagon is: (Change the color code FF0000) &gt<input
maxLength=20 value="B,FF0000 ,0,0,5" type="text" id="inp5"/><BR>
The color of background is: (Change the color code 000000) &gt<input
maxLength=20 value="c,s,0000 00" type="text" id="inp6"/><BR><BR>

<button onclick="newUrl ()"Click to get to Google a pentagon </
button><BR>
<TABLE width="100%" align=DEFAULT border=0>
<TBODY></TBODY></TABLE></FORM></FONT></BODY></HTML>

The above JS duplicates help given by others but allows some
experimentation
in the process.

bH

**MartinRinehart@gmail.com** · Aug 24 '08, 05:05 PM

Re: curves on canvas

bH wrote:

This is a testing tool to show a pentagon of various sizes and colors.
I am using IE and have not tested it using other browsers. The google
address
for drawing charts for this and other geometric shapes is:
http://code.google.com/apis/chart/

Works fine in Konqueror (Linux KDE).

Thanks. I'm a big user of google charts ( http://clintonbushcharts.org
) but didn't know that. Time to go back to the API docs and see what
else is there.

curves on canvas

curves on canvas

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment