jQuery Background image for var

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?