curves on canvas

Discussion in 'Javascript' started by MartinRinehart@gmail.com, Aug 20, 2008.

  1. Guest

    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?
     
    , Aug 20, 2008
    #1
    1. Advertising

  2. Guest

    No answers. I'll take that for "no". Guess I'll have to write one.
     
    , Aug 21, 2008
    #2
    1. Advertising

  3. 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
     
    Thomas 'PointedEars' Lahn, Aug 21, 2008
    #3
  4. Bart Van der Donck, Aug 21, 2008
    #4
  5. optimistx Guest

    Bart Van der Donck wrote:
    > 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,


    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.
     
    optimistx, Aug 21, 2008
    #5
  6. Guest

    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".
     
    , Aug 21, 2008
    #6
  7. 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
     
    Thomas 'PointedEars' Lahn, Aug 21, 2008
    #7
  8. Guest

    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>
     
    , Aug 21, 2008
    #8
  9. SAM Guest

    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
     
    SAM, Aug 22, 2008
    #9
  10. Guest

    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.
     
    , Aug 23, 2008
    #10
  11. bH Guest

    On Aug 23, 6:13 am, 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:
    http://code.google.com/apis/chart/

    JS sample code is:

    <HTML><HEAD><TITLE>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>
    <!-- The source is: http://code.google.com/apis/chart/ -->
    <!-- This shape is a pentagon -->
    <!-- Sample script document -->
    <head>
    <title>Test a Pentagon Chart form</title>
    <script language="JavaScript">
    function newUrl()
    {
    var inp1 = document.getElementById ("inp1");
    var inp2 = document.getElementById ("inp2");
    var inp3 = document.getElementById ("inp3");
    var inp4 = document.getElementById ("inp4");
    var inp5 = document.getElementById ("inp5");
    var inp6 = document.getElementById ("inp6");
    loc = inp1.value + "cht=" + inp2.value + "&chs=" +
    inp3.value+"&chd=" + 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.google.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,000000" 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
     
    bH, Aug 24, 2008
    #11
  12. Guest

    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.
     
    , Aug 24, 2008
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. tony lincoln

    to get Cumulative curves using java

    tony lincoln, Oct 16, 2003, in forum: Java
    Replies:
    1
    Views:
    383
    Phil...
    Oct 16, 2003
  2. Warren Francis

    Any royal road to Bezier curves...?

    Warren Francis, Nov 21, 2005, in forum: Python
    Replies:
    11
    Views:
    1,020
    Scott David Daniels
    Nov 23, 2005
  3. sunny
    Replies:
    1
    Views:
    327
    Vladimir S. Oka
    Feb 26, 2006
  4. Dexter
    Replies:
    0
    Views:
    363
    Dexter
    Mar 26, 2008
  5. Dexter

    Noah's ArcLength (Parametric Curves)

    Dexter, Mar 26, 2008, in forum: C Programming
    Replies:
    0
    Views:
    313
    Dexter
    Mar 26, 2008
Loading...

Share This Page