Hide canvas elements when user clicks on an independent div (using PaperJS)

Question

I am using PaperJs to show some elements and I have a div outside the canvas and on clicking in that div I want to hide one of the element inside the canvas.

I am using following code to do the above:

$('#outside_div').on('mousedown','div',function(event){
 if(group1.opacity == 0)
 {
    group1.opacity = 1;
 }
 else
 {
    group1.opacity = 0;
 }
});

Here group1 is a part of PaperJS (http://paperjs.org/). This set of code gives me desired result only when I move my cursor after clicking on the 'outside_div'.

I'll reframe - when I click on the #outside_div nothing happens but as soon as I move my cursor even a single pixel, group1 gets visible/invisible.

I want the visible/invisible toggle to happen at the click itself, does anyone know how to go about it or has anyone faced the issue and got some work around. Any suggestion would be great.

I've even tried to emulate mousemove event and also tried to shift the focus to another div but nothing changed.

Answer 1

Although I guess you already found a solution I'll answer that question.

You have to call view.draw(); to update the canvas.