Raphael.js Bug - global leakage of arrow

by rodneyrehm

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div id="canvas"></div>

CSS

#canvas {
    width: 300px;
    height: 300px;
    background: #EEE;
}

JavaScript

var r = Raphael(document.getElementById('canvas'), 300, 300),
    p1, p2;

// draw a line with arrow
p1 = r.path([
    'M', 0, 0,
    'L', 100, 100
].join(',')).attr({
    'arrow-end': 'wide',
    'fill': 'none',
    'stroke-width': 2
});

// draw another line with arrow
p2 = r.path([
    'M', 300, 300,
    'L', 200, 200
].join(',')).attr({
    'arrow-end': 'wide',
    'fill': 'none',
    'stroke-width': 2
});

// make second line red
p2.attr({
    'stroke' : '#FF0000'
});

// note that arrow head of first line turned red

/*
// run this to make all arrow heads black
r.path([
    'M', 300, 100,
    'L', 120, 100
].join(',')).attr({
    'arrow-end': 'wide',
    'fill': 'none',
    'stroke-width': 2
});
*/