Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > curves on canvas

Reply
Thread Tools

curves on canvas

 
 
MartinRinehart@gmail.com
Guest
Posts: n/a
 
      08-20-2008
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?
 
Reply With Quote
 
 
 
 
MartinRinehart@gmail.com
Guest
Posts: n/a
 
      08-21-2008
No answers. I'll take that for "no". Guess I'll have to write one.
 
Reply With Quote
 
 
 
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      08-21-2008
http://www.velocityreviews.com/forums/(E-Mail Removed) 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 bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
 
Reply With Quote
 
Bart Van der Donck
Guest
Posts: n/a
 
      08-21-2008
(E-Mail Removed) 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,

--
Bart
 
Reply With Quote
 
optimistx
Guest
Posts: n/a
 
      08-21-2008
Bart Van der Donck wrote:
> (E-Mail Removed) 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...tm#performance
and his homepage with selfmade carbonfiber bike... a really admirable guy.


 
Reply With Quote
 
MartinRinehart@gmail.com
Guest
Posts: n/a
 
      08-21-2008
Thanks Bart, but not the ticket. I'm using the <canvas> tag, which
works well per w3c pre-standard in Firefox, Opera, Safari and
Konqueror. Pretty good 2D drawing capability. A <canvas> pentagon 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 <canvas> in 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".
 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      08-21-2008
(E-Mail Removed) 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 bugRiddenCrashPronePieceOfJunk = (
navigator.userAgent.indexOf('MSIE 5') != -1
&& navigator.userAgent.indexOf('Mac') != -1
) // Plone, register_function.js:16
 
Reply With Quote
 
MartinRinehart@gmail.com
Guest
Posts: n/a
 
      08-21-2008
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>
<title> Pentagon! </title>

<script>

function draw() {

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

var rg = pen.createRadialGradient(
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%>
<h1> Pentagon 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>
 
Reply With Quote
 
SAM
Guest
Posts: n/a
 
      08-22-2008
(E-Mail Removed) a écrit :
> Thomas 'PointedEars' Lahn wrote:
>>> Pointed Ears:

>> It is spelled differently, you know.


Oh Yes ! right one is : OreillesPointées

> 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
 
Reply With Quote
 
MartinRinehart@gmail.com
Guest
Posts: n/a
 
      08-23-2008

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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
how to couper contenier of a canvas in an outer canvas??? olsr.kamal@gmail.com Python 10 03-15-2013 08:46 PM
Canvas with scrollbars - how to get correct canvas coordinate when the scroll bars have moved? PhilC Python 2 10-25-2004 11:57 AM
Canvas scrolling - scrollBar become "disabled" on change in canvas Askari Python 2 08-30-2004 02:56 PM
Doing the curves in adobe n Digital Photography 4 12-01-2003 06:49 PM
to get Cumulative curves using java tony lincoln Java 1 10-16-2003 08:55 PM



Advertisments