Rotate() is not a function

In my project I created a canvas in which:

  • An image is loaded into the canvas
  • Possibility of resizing the uploaded image

Now I’m trying to add the rotate function to rotate the loaded image inside the canvas when I hold down the mouse.

I tried to add the rotate () function but the error message it returns is: $(…).rotate is not a function


<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 =[0],
                    imageType = /image.*/;

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

                var reader = new FileReader();
                reader.onload = fileOnload;

            function fileOnload(e) {
                var $img = $('<img>', { src: });
                $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);
                var container = $(".ui-wrapper");

                // if the target of the click isn't the container nor a descendant of the container
                if (! && container.has( === 0) 
                    $(".ui-resizable-handle").attr("style","visibility: hidden");
                } else {
                        $(".ui-resizable-handle").attr("style","visibility: visible");
                window.zindex = 30;

                $(".resize").resizable({handles: 'ne, se, sw, nw'});
                    stack: "div"
                    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});


This instead is the example of how I would like the effect to come:

In this example, however, the image is immediately loaded into the canvas. Instead, I want the rotate effect to appear when I uploaded the photo into the canvas with the input file.

47 thoughts on “Rotate() is not a function”

Leave a Comment