Okay...extremely new to Raphael.
Anyway, how do I draw a border around my drawing so I can see the size of my canvass?
<script type="text/javascript">
$(document).ready(function () {
var paper = Raphael('drawing', 100, 100);
var circle = paper.circle(50, 40, 30);
var rectangle = paper.rect(60, 60, 100, 20, 5);
var filler = { fill: 'red', cursor: 'pointer' };
circle.attr(filler);
circle.node.id = 'myCircle';
rectangle.attr(filler);
});
</script>
<div id="drawing" class="canvass">
</div>
Don't forget that by default, your div is going to fill any available width, so it will not necessarily be the same dimensions as the canvas.
I don't think Raphael allows you to do it directly, but here is a way you can do it using jQuery:
$('div#drawing').find('> svg,div').css({'border': '1px solid #f00'});
Or you can just use CSS in a similar way:
div#drawing svg, div#drawing div {
border: 1px solid #f00;
}