javascript - Remove style if i click outside of canvas

Question

I would like the canvas border and the four blue corners of the resize to appear when I click inside the canvas tag. If, on the other hand, I click outside the canvas tag, the border and the four blue corners must disappear.

This is my code, but it doesn't work well for it:

<style>
.resize
{
    position:absolute;
     border-color:black;
     border-style:solid;
     border-width:1px;
}

.ui-wrapper{
z-index: 999 !important;
}
.ui-resizable-se{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 bottom:0px;
 right:0px;
}

.ui-resizable-sw{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 bottom:0px;
 left:0px;
 position:absolute;
 z-index:999 !important;
}
.ui-resizable-nw{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 top:0px;
 left:0px;
 position:absolute;
 z-index:999 !important;
}
.ui-resizable-ne{
 width: 7px;
 height: 7px;
 background-color: #D0F2F0;
 border-color:#45C1B1;
 border-style:solid;
 border-width:1px;
 top:0px;
 right:0px;
 position:absolute;
 z-index:999 !important;
}
.ui-resizable-se{position:absolute;z-index:999 !important;}
</style>

<canvas id="canvas" class="resize" style="width:200px;height:200px;"></canvas>
    <input type="file" id="file-input">

$(function() {
            $('#file-input').change(function(e) {
                var file = e.target.files[0],
                    imageType = /image.*/;

                if (!file.type.match(imageType))
                    return;

                var reader = new FileReader();
                reader.onload = fileOnload;
                reader.readAsDataURL(file);
            });

            function fileOnload(e) {
                var $img = $('<img>', { src: e.target.result });
                $img.load(function() {
                    var canvas = $('#canvas')[0];
                    var context = canvas.getContext('2d');

                    canvas.width = this.naturalWidth;
                    canvas.height = this.naturalHeight;
                    context.drawImage(this, 0, 0);
                });
            }
                    });

            window.zindex = 30;

                $(".resize").resizable({handles: 'ne, se, sw, nw'});
                $(".resize").parent().draggable({
                    stack: "div"
                });
                $(".resize").rotate({
                    bind: {
                        dblclick: function() {
                            $(this).data('angle', $(this).data('angle')+90);
                            var w = $(this).css('width');
                            $(this).parent().rotate({ animateTo: $(this).data('angle')}).css({width: $(this).css('height'), height: w});

                        }
                    }
                });
        
        
        $(document).mouseup(function(e) 
        {
            var container = $("#canvas");

            // if the target of the click isn't the container nor a descendant of the container
            if (!container.is(e.target) && container.has(e.target).length === 0) 
            {
                $("#canvas").attr("style","border-style: none !important;");
                $(".ui-resizable-handle").hide();
            }
        });

For the moment I'm trying with the $(document).mouseup function but it doesn't work together with my other code.

One last thing, I see in console that $(...).rotate() is not a function, why this?

question from:https://stackoverflow.com/questions/65850238/remove-style-if-i-click-outside-of-canvas

Answer 1

Waitting for answers