Hi,
I got a issue and i can't figure it out.

I'm trying to add a background image for the variable model, this the js code:
Code:
var model = {
    context: {},
    cnv: {},
    angle: 0,
    width: 100,
    bgColor: "#ff0000",
};

$(document).ready(function(){
    //start the menu
    $( '#canvas' ).css( "background-color", "#fffff" ).setUpCanvas();
});

jQuery.fn.setUpCanvas = function(){
    // setup canvas
    model.cnv = $( this )[0];
    model.context = model.cnv.getContext('2d');
	model.img = img;

   
    var cX, cY;
    var mX, mY = 0;
    var offX, offY;
    
    //init canvas
    function updateRectangle(ang){
        model.context.clearRect(0, 0, 300, 300);
        model.cnv.width = model.cnv.width;
        
        offX = model.cnv.offsetLeft;
        offY = model.cnv.offsetTop;
        
        model.context.setTransform(1,0,0,1,0,0);
        var x = 100;
        var y = 100;
        var width = model.width;
        var height = 100;
        cX = x + width*0.5;
        cY = y + height*0.5;
        model.context.translate(x + .5*width, y + .5*height);
        model.context.rotate(ang);
        model.context.fillStyle = model.bgColor;
        model.context.fillRect(-0.5*width, -0.5*height, width, height);
    }
    updateRectangle(model.angle);// display the rectangle/square
    
    $( model.cnv ).mousedown(function(event){
        // calculate click angle minus the last angle
        var clickAngle = getAngle( cX + offX, cY + offY, event.clientX, event.clientY ) - model.angle;
        $( model.cnv ).bind("mousemove", clickAngle, function(event){
            // calculate move angle minus the angle onclick
            model.angle = ( getAngle( cX + offX, cY + offY, event.clientX, event.clientY ) - clickAngle);
            updateRectangle(model.angle);
        });
    });
   
   /**
* Remove listener
*/
    $( model.cnv ).mouseup(function(){
        $( model.cnv ).unbind("mousemove" );
    });
    
    /**
* switch button for demonstration
*/
    $('#switchButton').toggle(
       function(){
          $(this).text("change to square");
          model.width = 150;
          model.bgColor = "#0000ff";
          updateRectangle(model.angle);
       },
       function(){
           $(this).text("change to rectangle");
           model.width = 100;
           model.bgColor = "#ff0000";
           updateRectangle(model.angle);
       });
   
};

/**
* angle helper function
*/
function getAngle( cX, cY, mX, mY ){
    var angle = Math.atan2(mY - cY, mX - cX);
    return angle;
}
and this is the html code:
Code:
<!DOCTYPE html>
<html>
<head>

  <script type="text/javascript" src="jQuery-1.8.2-min.js"></script>
     <script type="text/javascript" src="script.js"></script>
     
<title>Rotate Canvas</title>
</head>

  
<body style="padding: 0px; margin: 0px; font-family: sans-serif;">

<canvas id="canvas" width="300" height="300" />

<div class="picture">
    <img src="img.jpg" alt="foto1" />
</div>
            
</body>
</html>
So what i want is the following;
A image needs to be rotated by dragging like it does right now with the red square, now you can add a bgColor to the model but i can't seem to figure out how to replace te color with an image.

Could somebody help me with this?