Sign in to follow this  
MorpheusZ

Graphics lineWidth

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Thanks!

 

I'm actually drawing a polygon. Your suggestion (drawing the border manually) is still doable, but it's a little bit more involved. I was hoping that there was an api for that.

I'll wait a bit before marking as solved.

Share this post


Link to post
Share on other sites

Yes, basically you will have to redraw the shape but in smaller size. It's not very fancy but I don't know of another way. Maybe I'm wrong, haven't used direct canvas in a while.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.