How to add raphaeljs object to <div> tag

Question

$(document).ready(function(){ $("#btnAO").live("click", function(){ $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>"); $("#id1").append(new Raphael(document.getElementById('canvasdiv'), 900, 600).rect(30, 50, 80, 100).attr({ fill : "blue", stroke : "black", strokeWidth : 0, r : 5 })); }); }); 

I tried this add a Raphael object, but it will not be displayed on the screen

Answer 1

Raphael maps to the container that you give it as the first argument. The return value is the paper object of Raphael that you use for rendering. In short, just cut off $("#id1").append and it will appear.

 $(document).ready(function(){ $("#btnAO").live("click", function(){ $("#canvasdiv").append("<div id='id1' width='50px' height='50px'></div>"); var paper = new Raphael(document.getElementById('canvasdiv'), 900, 600); paper.rect(30, 50, 80, 100).attr({ fill : "blue", stroke : "black", strokeWidth : 0, r : 5 }); }); }); 

---

Also, since you use jQuery anyway, you can replace document.getElementById('canvasdiv') with $('#canvasdiv').get(0) for consistency.

Answer 2

• no new keyword required

var paper = Raphael(document.querySelector(target_css_selection_str), svg_width_int, svg_height_int);

2. Since you are asking about what it returns. It returns a Paper object that contains a link to the new SVG element that it just created, through a property that it calls a canvas.

... you should approve @Supr as the correct answer, I just add 2 cents.