MorpheusZ Posted September 7, 2014 Share Posted September 7, 2014 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! Link to comment Share on other sites More sharing options...
ram64 Posted September 7, 2014 Share Posted September 7, 2014 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 More sharing options...
MorpheusZ Posted September 8, 2014 Author Share Posted September 8, 2014 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. Link to comment Share on other sites More sharing options...
ram64 Posted September 8, 2014 Share Posted September 8, 2014 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. Link to comment Share on other sites More sharing options...
Recommended Posts