# [html5] Points in a <CANVAS> element

John S. Urban urbanjost at comcast.net
Sat Feb 9 18:00:21 PST 2008

```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, ...
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.   `._.-(,_..'--(,_..'`-.;.'

```