curves on canvas

M

MartinRinehart

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?
 
T

Thomas 'PointedEars' Lahn

(e-mail address removed) wrote.
No answers.
Click to expand...

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

Please learn to quote, and get a real name.


PointedEars
 
M

MartinRinehart

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".
 
T

Thomas 'PointedEars' Lahn

Zorn's stuff IS VERY cool.
Click to expand...

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:
Click to expand...

It is spelled differently, you know.
Full last name is Rinehart. You could try Google Groups
and click "view profile".
Click to expand...

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
 
M

MartinRinehart

Thomas said:
It is spelled differently, you know.
Click to expand...

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>
 
S

SAM

(e-mail address removed) a écrit :
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>
Click to expand...

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

MartinRinehart

SAM said:
works fine, but ...
that is not a (regular) pentagone.
Click to expand...

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.
 
B

bH

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.
Click to expand...

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
 
M

MartinRinehart

bH said:
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/
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Canvas blob 5
Canvas drawing HTML Javascript on elementor 1
JavaScript: how to keep track of the circle in canvas on specific path? 0
I Need Help with making a function that draws in a canvas using location data. 1
Anyone for a Canvas Competition? 6
Drawing ellipses with Canvas 5
Canvas question 2
FAOENTRY - canvas 9

Members online

Total: 26 (members: 1, guests: 25)
Robots: 322

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top