[html5] Proposal for a hair width/line property when using <canvas> tag

Shaun Morris shaunwithanau at gmail.com
Tue Mar 16 04:43:41 PDT 2010

Thanks for the interest.

> Depending on the complexity of your drawing, you may find the following
> pages useful as a work-around.

I would say that the drawings are pretty complex, usually consisting of
approximately 20000+ lines/arcs.

I am assuming you are using a C or Fortran program to convert some autocad
> drawing, such as an ADI file to the format you require.

I haven't actually looked at the program that does the conversions, but I am
being given data obtained from drawings made in autocad. What we have in our
database are a series of .svf files. Where svf is a custom file extension
which stands for scalable vector file (not to be confused with the more
popular serial vector format), because as I understand it these were created
before the existence (or at least widespread use) of SVG. These are
essentially just text files which contain all of the data needed to recreate
the drawing.

What I have begun to implement is a javascript program which parses through
these files and creates a series of primitive type objects (lines, arcs,
etc.) with their location and size stored.

I then put these objects in a shape array and go through the array calling
each primitive types' individual draw method. Right now I have the Canvas
draw methods done, but am working on implementing similar SVG ones as well.

For example a lines draw function would look something like this.

line.draw_canvas = function()
  moveTo(line.x1, line.y1);
  lineTo(line.x2, line.y2);

where this is being called in a function that looks something like this:

function drawBG()
  //setup code
for(s in shapeArray)
  //stroke all lines

Right now my concern is getting everything working but I will soon be
looking at efficiency to decide which output (Canvas or SVG) will be pushed

The functions can easily be made to specify a specific line

thickness regardless of the scale.

>From what I could tell from the source code of your last example you do
something like what Ian said and adjust the line width as the scalefactor
changes so that it appears to remain constant, but I could be wrong. For
some reason when I first tried this method I couldn't get it to work out
right, but can't quite remember the problem I was having.

And if anyone is interested the way that I currently plan to work around the
limitatins of SVG not being able to draw 20000 "things" is drawing all the
lines (the majority of most drawings) as one long path where line.draw_svg()
will append a series of strings to the path with the strings looking
something like:
"M " + line.x1 + " " + line.y1 + "L " + line.x2 + " " + line.y2

On Sat, Mar 13, 2010 at 4:27 AM, John S. Urban <urbanjost at comcast.net>wrote:

> I had a similiar problem. Depending on the complexity of your drawing, you
> may find the following pages useful
> as a work-around. I am assuming you are using a C or Fortran program to
> convert some autocad drawing, such
> as an ADI file to the format you require. The links show a simple library
> callable from C or Fortran that will create
> a vector file as a VML (For IE), HTML5 CANVAS, SVG, or PDF file. The key is
> that the CANVAS file is actually
> a JavaScript file that draws into a CANVAS element. The functions can
> easily be made to specify a specific line
> thickness regardless of the scale. A more advanced version of this theme,
> which I unfortunately am not able to make
> public, calls functions that create VML or CANVAS directives depending on
> which browser is being used, and
> allow for easy panning and zooming, and even allow you to select "layers"
> and write the data back out as simple text
> in a metafile that can be read back into a VOGLE program and put back out
> in another format. The graphics library
> can be found at:
> http://home.comcast.net/~urbanjost/enter.html under "VOGLE" graphics
> (there is even a CALCOMP interface there,
> which AutoCad used to provide a skeleton program for, but I know longer
> know if they do. It is probably just interesting for historical reasons).
> An example output file can be found at:
> http://home.comcast.net/~urbanjost/canvas/vogle4.html
> If you are not comfortable with making programming changes to the driver to
> change the line thickness behavior, etc.
> this might not be of use. If you are, you will find the library is very
> portable. If you want to develop on a PC, I would
> recommend deactivating the X11 driver and using Cygwin for development if
> it is allowed (MinGW is a good alternative). This software was written
> before "hardware" text was available in CANVAS
> elements, and before a Fortran compiler was readily available that
> supported the C/Fortran interface now in the Fortran (f2003+) standard, but
> is has been used on Solaris/HPUX/Linux/*BSD/Cygwin/AIX/Ultrix/Tru64/... .
> I am not able to make the "browser" driver available (which has ECMAScript
> routines that write the multiple formats
> described above); but I hope a clear path is available if you look at
> "merging" the VML and SVG drivers into the
> CANVAS driver's functions. Note that I have not checked recently, but that
> VML worked fine in IE; but broke
> the other MSW products that read it (Word, in particular) if the drawing
> had more than a few thousand vectors. I am
> a fan of VML, but support has deteriorated significantly for it as far as I
> can see -- although I was initially thrilled to have a relatively open
> format that was importable into almost all MSW products.
> This approach (JavaScript/ECMAScript) let me handle CANVAS-related issues
> with text, dashed codes, zero-length vectors, different browser capabilities
> (much
> less of an issue now if you avoid IE -- the standard has now been
> implemented more consistently) , and so on.
> This is certainly not a "pure HTML5" solution, but it has worked out well
> for my needs. I haven't been heavily involved in working with engineering
> drawings since my ICEMDDN/Anvil days (It's likely you don't go back far
> enough to even recognize the references, I realize);  but I think this could
> work for you with some reasonable effort.  There was a day when the world
> thought
> all CAD/CAM  metafile problems were solved, what with IGES and CGM (anyone
> else remember those?)!
> http://home.comcast.net/~urbanjost/CANVAS/LINETHICKNESS/plot2.html shows a
> file that keeps line thickness
> constant (hand edited); "plot1.html" from the same location is the original
> file as written by the VOGLE library to give
> you a head start.
> ----- Original Message ----- From: "Ian Hickson" <ian at hixie.ch>
> To: "Shaun Morris" <shaunwithanau at gmail.com>
> Cc: <help at lists.whatwg.org>
> Sent: Thursday, March 11, 2010 8:06 PM
> Subject: Re: [html5] Proposal for a hair width/line property when using
> <canvas> tag
>  On Thu, 4 Feb 2010, Shaun Morris wrote:
>>> I am working for a company who is currently trying to reproduce
>>> engineering drawings made in AutoCad within the canvas tag as a way to
>>> step away from the legacy way of doing it using Java and being stuck in
>>> IE.
>>> These drawings like many engineering drawings or mapping applications
>>> have to be scaled considerably and the current problem is that after
>>> scaling a line with a lineWidth of 1 after being scaled 5x's has a
>>> lineWidth of 5.
>> Yeah, currently this requires only using square zooms (not different x and
>> y scaling factors) and "un"zooming the lineWidth accordingly.
>> I've noted this idea for addition to <canvas> at a future date. I haven't
>> added it yet, since browser vendors haven't caught up with what we _have_
>> added yet! We don't want to get too far ahead of them.
>> --
>> 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.whatwg.org/pipermail/help-whatwg.org/attachments/20100316/d47e0e32/attachment-0002.htm>

More information about the Help mailing list