Draw a rectangle with dashed lines using Rafael.js

Question

I use Rafael.js to draw rectangles in the image. My problem with adjusting the color of the stroke is that the background can be dark or light or any color. I thought the best way to handle this is to use dashed lines. However this challenge

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

does not work. Firebug (in FireFox 20.0) returns an error message stating that the existing function in my .js file does not exist. It seems like a dasharray bar is not valid for rectangles.

Answer 1

Basic JavaScript error:

 {stroke-dasharray:"---"} 

Must be:

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

Also: "---" not supported for stroke-dasharray ; it should be:

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

Answer 2

There is no "---", a possible dasharray bar: ["", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."]

One way to color the stroke is to use the HSV or HSL space, and then select the opposite (or adjacent) spectrum. Try the answers from: Given the value of RGB, how do I create a hue (or hue)?

Answer 3

Values ​​of "stroke-dasharray":

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