[html5] Points in a <CANVAS> element

John S. Urban urbanjost at comcast.net
Sun Feb 10 17:21:08 PST 2008


I think I made an example that shows the behavior better than I described it 
previously.
I changed the example at
http://home.comcast.net/~urbanjost/canvas/vogle4.html
to let you turn off the points in the drawing, render them as circles, 
render them as squares, or render them with a sample marker (just a 
plus-sign, there could
be others).
Essentially, in this example file every polyline is defined as an array. 
Then each array is passed to a JavaScript procedure that draws each array 
with a series of moveTo()
and lineTo() calls. The normal results can be viewed by selecting "no 
points". Now click on one of the other point options and you will see what I 
consider to be the
missing data appear in the plots. The routine d() behaves the way I was 
asking that <CANVAS> behave. I carried it one step further by adding the 
idea of a
"marker"; if this was done with a CSS style I could imagine something like
canvas{
point-style: none
}
being the default, with other options being "circle", "box", and maybe even 
some other marker styles like "diamond" and "plus"';

but I would prefer that the behavior just be the default for <CANVAS> , or 
be controlled with a <CANVAS> style procedure like fillStyle().
If the default changes, I would say one option would be to show points as 
circles if endcaps are rounded, as squares
if endcaps are "square" and null if endcaps are "butt".




----- Original Message ----- 
From: "John S. Urban" <urbanjost at comcast.net>
To: "Ian Hickson" <ian at hixie.ch>
Cc: <help at lists.whatwg.org>
Sent: Saturday, February 09, 2008 9:00 PM
Subject: Re: [html5] Points in a <CANVAS> element


> Yes. I want a circle or square sized relative to the current line width at
> the point;
> depending on what the current linecap style is. The JavaScript procedures 
> in
> the
> example file show a simplified version of the desired behavior -- It just
> does a
> circle, and only handles line segments (2-point lines) not all polylines
> that collapse
> to a point or simple moves (ie any 1-point line). I plan on adding that
> behavior to
> the function to make it a better example.
>
> Treating points as (special-case) lines  is such a basic requirement to a
> set of problems
> I have worked with for such a long time, I have forgotten
> how non-intuitive what I'm asking for might seem.
>
> Rendering points makes a lot of plotting applications a lot simpler.
> Any time your are plotting arbitrary polylines there is the case where you
> have a polyline of zero length (ie. a point).  Lets say you are plotting a
> polyline
> showing the movement of each person in a room. You probably still want to
> show a line
> for the people that did not move. If they moved so much as a single unit
> they
> will show up; and two different people might use different units (if I
> measure to the
> nearest inch and you measure to the nearest centimeter different people 
> show
> up)!
>
> Points have no visible rendering in a vector space?
> A line is only visible if it has width. Just because a line has no length
> it should
> not necesssarily become invisible. <CANVAS> does not render mathematically
> pure lines
> that only have points as a property. Lines have color and width and 
> linecap
> styles,
> for example. So can points. Those properties can be used to make a point
> show up,
> just like they are used to render a line visibly.
>
> Polylines of zero length show up in just about any application where you 
> are
> representing information with curves. The most common example is probably
> when you are generating an XY plot. I cannot think of a plotting package
> that
> does not show a line of zero length. If you have any plotting package, 
> give
> it
> a curve with one point in it. Does it display?
>
> Think of the case where I have a line segment that is becoming shorter and
> shorter.
> When it gets to a length short enough that the rendering canvas sees it's
> endpoints
> as being equal, it vanishes! But vector drawings should be scalable. Yet, 
> if
> I
> rescale the same plot, the points are far enough apart that lines now 
> appear
> where
> there was nothing! This is not good behavior for an XY plot, nor for
> packages that
> do technical drawings and so on.
>
> The JavaScript codes in my example plots shows an over-simplifed example 
> of
> what I think should happen.
> 1) When a line is composed only of a move, or a polyline with all points
> having
>     the same coordinates is encountered, a point should be generated.
> 2)  If the current line caps are rounded, a circle with a diameter equal 
> to
> the
>     current line width should be generated; else a square with an edge
> equal
>     to the current line width should be generated; both should be centered
> on
>     the point.
>
> The example file contains some simple xy-plots generated from a package 
> that
> supports
> dozens of output devices, including SVG, CGM, PostScript, VML, PPM 
> pixmaps,
> xfig(1), GNU plotutils(1), Tektronix 4014 displays, X11 windows, ...
> When I made a driver for <CANVAS> I had to add conditional code to the
> driver to
> keep short lines and points from disappearing. The reason why is because 
> of
> the behavior of  <CANVAS>.
> concerning lines it sees as points. The fact that the vast majority of 
> those
> output formats do not ignore
> a line of zero length, but show it as a point helps support the idea that
> this would be a useful
> behavior, even if it is optional -- if not for the reasons I mentioned, at
> least for the reason of
> keeping coding simpler for developers supporting multiple vector-format
> outputs.
>
> How'd I do?
> Did I get my point across (pun intended)? If not, a picture's worth a
> thousand words. I can make a simple
> application that shows how rendering points avoids odd conditions.  The
> first one would show
> this ...
>
> A very thick line with round
> end-caps is drawn along a scale that goes from -1 to 1. One end is fixed 
> at
> X=0. The other end
> oscilattes from X=1 to X-1. The line looks
> like a rectangle with rounded ends. As it shortens it starts to look like 
> a
> circle. Suddenly, it vanishes!
> But then, as it gains a negative length it re-appears as a near-circle 
> which
> stretches back into the
> rounded rectangle.
>
>
>
>
>
>
> ----- Original Message ----- 
> From: "Ian Hickson" <ian at hixie.ch>
> To: "John S. Urban" <urbanjost at comcast.net>
> Cc: <help at lists.whatwg.org>
> Sent: Saturday, February 09, 2008 7:11 PM
> Subject: Re: [html5] Points in a <CANVAS> element
>
>
>> On Fri, 1 Feb 2008, John S. Urban wrote:
>>>
>>> More simply put, points are an essential graphic element. A <CANVAS>
>>> element apparently provides no support for them. even a CALCOMP graphics
>>> library from thirty years ago provided a way to generate points. If the
>>> obvious ways to support them (ie a separate procedure such as Point(x,y)
>>> or the rendering of a point when a polyline of zero length is
>>> encountered) do not exist then how is a point supposed to be generated?
>>> There is beauty in simplicity, but this is a lack of basic
>>> functionality. Many people will be forced to kludge their codes to
>>> change a null line to a line of 1 unit in length, or to filter for lines
>>> of zero length and draw a circle and so on.  So what is the supported
>>> method for generating points? A simple example would be most helpful.
>>
>> Points, in a vector space like <canvas>, have no visible rendering. Do 
>> you
>> want a circle? A square? Some other shape? All of those can be drawn 
>> using
>> the current API. I don't really understand what you are asking for.
>>
>> -- 
>> Ian Hickson               U+1047E                )\._.,--....,'``.    fL
>> http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
>> Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'
>
> _______________________________________________
> Help mailing list
> Help at lists.whatwg.org
> http://lists.whatwg.org/listinfo.cgi/help-whatwg.org 




More information about the Help mailing list