Canvas / Graphics:How to draw a 1 pixel line?

[Karter]

Hi Folks,
When I try to draw a 1 px line of width 1px, it is never as thin as
it appears when I draw it with CSS (for example: border:1px )

If I decrease the stroke's width to a value below 1, the color starts
to fade.

Any thoughts on how to draw a thin line?

---Code used to draw line--
var graphics = goog.graphics.createGraphics(500,500),
fill = new goog.graphics.SolidFill('black',1),
stroke = new goog.graphics.Stroke(1, 'black'),
path = graphics.createPath().moveTo(10,10);

path.lineTo(100,10);
graphics.drawPath(path,stroke,null);

TIA,
K



--
Subscription settings: http://groups.google.com/group/closure-library-discuss/subscribe?hl=en

[Erik Arvidsson]

Canvas coordinates are at the origin of a pixel and not in the middle
of a pixel.

Try doing a translate(.5, .5) to line up with the physical pixels.

--
erik

[Elazar Leibovich]

Did you try disabling anti aliasing?
Have a look here http://stackoverflow.com/questions/1393056/html-canvas-draw-image-without-anti-aliasing

[Karter]

Hi Eric,
thanks for responding - I'm assuming you are referring to the
translate defined here:
http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_affinetransform.js.source.html
( I could not find a translate method defined anywhere else).

I'm assuming you are proposing transform the co-ordinates..is there a
method on the graphics class that would do this? - I am not sure how
to do what you are suggesting.

When I check the getPixelScaleX and getPixelScaleY for the graphics
element, it does return 1 on both counts.

> erik- Hide quoted text -
>
> - Show quoted text -

[Karter]

Erik, (sorry for the typo on your name) and Elazar,
Ignore my previous post. Looks like I can transform the path like
this:


path.transform(goog.graphics.AffineTransform.getTranslateInstance(0.5,0.5))

which gives me the thinner version of the line, but the edges are
still slightly smudged ( I am using a coordinate that is at 0,0 and
not fractional).

On Apr 19, 11:12 pm, Karter <listact...@gmail.com> wrote:
> Hi Eric,
>  thanks for responding - I'm assuming you are referring to the

> translate defined here:http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_...

> > - Show quoted text -- Hide quoted text -

[Erik Arvidsson]

I was a bit confused and thought you talked about HTML5 canvas.

The graphics object has a way to get a GroupElement (which is the canvas everything is drawn into). You can get this and set its transform by doing something like this:

var group = graphics.getCanvasElement();

group.setTransformation(.5, .5, 0, 0, 0)

goog.graphics.AffineTransform is only the math behind transformation using transformation matrices and it is used internally by setTransformation.

HTH,

-- 

erik