8

I am using Rafael.js to draw rectangles on an image. My problem with setting the stroke color is that the background may be dark or light or any color. I thought that the best way to deal with that would be using dashed lines. However this call

circle = Canvas.paper.rect(left, topCoord, width, height).attr({stroke-dasharray:"---"});

does not work. Firebug (on FireFox 20.0) returns an error message saying that an existing function in my .js file does not exist. It appears that stroke-dasharray is not valid for rectangles.

3 Answers 3

9

Basic JavaScript error:

{stroke-dasharray:"---"}

Should be:

{"stroke-dasharray":"---"}

Also: "---" isn't a supported value for stroke-dasharray; it should be:

{"stroke-dasharray":"--"}
3
  • Thanks. That made the error go away but I am still getting solid black lines for the rectangle. Thanks, Peter. Apr 9, 2013 at 21:21
  • 1
    Looking at the Raphael reference I don't think three dashes is a valid option. Try two: "--"
    – searlea
    Apr 9, 2013 at 21:26
  • That worked for getting dashed lines. Thanks very much! To get two different colors, I appear to need two calls: one with {"stroke-dasharray":"--"} and one with {"stroke":"white", "stroke-dasharray":"-.."}. Thanks very much! Apr 9, 2013 at 21:44
9

No "---", possible stroke-dasharray: [“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]

One way to color the stroke is to use the HSV or HSL space, then choose the opposite (or nearby) spectrum. Try the answers from: Given an RGB value, how do I create a tint (or shade)?

2
0

"stroke-dasharray" values are:

"-"     [shortdash]
"."     [shortdot]
"-."    [shortdashdot]
"-.."   [shortdashdotdot]
". "    [dot]
"- "    [dash]
"--"    [longdash]
"- ."   [dashdot]
"--."   [longdashdot]
"--.."  [longdashdotdot]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.