Jump to content

Graphics lineWidth


MorpheusZ
 Share

Recommended Posts

When increasing the graphics lineWidth and lowering its alpha, the outcome seems weird. See attached.

This is a part of some blue filled shape drawn on a green background (the line's blue is a bit darker than the fill's blue). Notice how the line spans both the filled shape and the background, creating the illusion of 2 drawn lines. The problem is, the line is centered on the boundary of the filled shape. Is there an option to have it grow on its inside instead (so that it is touching, not centered on, the boundary)? It not, any ideas for a work around?

 

Thanks!

 

post-10387-0-70450900-1410057196.png

Link to comment
Share on other sites

As far as I know there's no way to do this in Canvas. You will have to do stroke the shape smaller by twice the line width and position it with half the line width offset. You can see an example here: http://jsfiddle.net/ram64/rhdc3sLp

 

The offset will depend on how the shape is defined. For arcs you will not need the offset because the shape itself is defined from its center point.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...