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

John S. Urban urbanjost at comcast.net
Sat Mar 13 01:27:37 PST 2010

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

More information about the Help mailing list