Fixed annoying bug with canvas not resizing properly

demo/app.js

@@ -2,7 +2,7 @@ $(function () {
 
 	// Initialize both crossfade examples
 	$('.js-example-1').crossfade({
-		threshold: 0.2,
+		threshold: 0.2
 	});
 
 	$('.js-example-2').crossfade({

index.html

@@ -55,7 +55,7 @@ <h3>Options</h3>
         </tr>
         <tr>
           <th>backgroundPosition</th>
-          <td><em>Default: 'center center'</em><br>Determines the positioning of the background images. This option functions similarly to CSS background-size.</td>
+          <td><em>Default: 'center center'</em><br>Determines the positioning of the background images. Backgrounds are sized similarly to CSS's “background-size: cover”. This option determines along which edges the image is aligned.</td>
         </tr>
       </table>
 

src/crossfade.jquery.js

@@ -139,6 +139,10 @@
 		// and height are updated on window resize events.
 		this.canvas[0].width = this.width;
 		this.canvas[0].height = this.height;
+		this.canvas.css({
+			width: this.width,
+			height: this.height
+		});
 
 	};
 
@@ -168,7 +172,7 @@
 
 		// Draw the starting image…
 		this.paintbrush.drawImage(this.start[0], dimensions.offset.x, dimensions.offset.y, dimensions.width, dimensions.height);
-
+		
 		// Set the global opacity based on the visibility of our element…
 		this.paintbrush.globalAlpha = this.visibility;
 
@@ -190,7 +194,7 @@
 	// --------------------------------------------------------------------------
 
 	Crossfade.prototype.getDrawDimensions = function (imageWidth, imageHeight, containerWidth, containerHeight) {
-			
+
 		var dimensions = {};
 		var imageRatio = imageHeight / imageWidth;
 		var containerRatio = containerHeight / containerWidth;