Question

Hi I have a dropdown menu & whenever I change the option in the dropdown I want to change the content in the canvas…For example

var paper = Raphael("myDivID",400,400);
function smallRectangle(){
  paper.rect(10,10,100,50);
}
function bigRectangle(){
  paper.rect(10,10,150,100);
}

In my dropdown i’ll have two options “small rectangle” & “big rectangle”. I want to call corresponding functions on dropdown selection. The issue I’m facing with is that once i change the dropdown option Raphael don’t seem to draw it. I have read from some questions in stackoverflow that there is no need to use redraw technique in RaphaelJS
See the Answer!

Even If I try this way:

var paper = Raphael("myDivID",400,400);
function smallRectangle(){
  paper.clear()
  paper.rect(10,10,100,50);
}
function bigRectangle(){
  paper.clear()
  paper.rect(10,10,150,100);
}

This don’t seem to add elements to canvas after the clear() function. Canvas remains empty.

FYI:my code is very large so I posted this simple example here.

Answer 1

There is no need to redraw the rect again ….

function resize_Rect(rect,newWidth,newHeight){//passing rect ,new width and new height
         rect.attr({'width':newWidth,'height':newHeight});
               }

Hope it helps you out …