Fix an issue where tip was not drawn smoothly on Retina display

This fix resolved an issue in Chrome, where the tip is drawn pixelated on Retina displays, like the MacBook Pro Retina.

src/tips/tips.js

@@ -14,6 +14,9 @@ IMPORTANT = ' !important',
 // Check if the browser supports <canvas/> elements
 HASCANVAS = !!document.createElement('canvas').getContext,
 
+// Fetch device pixel ratio
+PIXEL_RATIO = window.devicePixelRatio || 1,
+
 // Invalid colour values used in parseColours()
 INVALID = /rgba?\(0, 0, 0(, 0)?\)|transparent|#123456/i;
 
@@ -203,8 +206,12 @@ $.extend(Tip.prototype, {
 	},
 
 	// Tip coordinates calculator
-	_calculateTip: function(corner) {	
-		var width = this.size[0], height = this.size[1],
+	_calculateTip: function(corner, size, scale) {
+		scale = scale || 1;
+		size = size || this.size;
+
+		var width = size[0] * scale,
+			height = size[1] * scale,
 			width2 = Math.ceil(width / 2), height2 = Math.ceil(height / 2),
 
 		// Define tip coordinates in terms of height and width values
@@ -264,7 +271,7 @@ $.extend(Tip.prototype, {
 			curSize = this.size,
 			mimic = options.mimic,
 			round = Math.round,
-			color, precedance, context,
+			color, precedance, context, scale, scaledSize,
 			coords, bigCoords, translate, newSize, border;
 
 		// Re-determine tip if not already set
@@ -308,9 +315,6 @@ $.extend(Tip.prototype, {
 		// Border colour was invalid, set border to zero
 		else { this.border = border = 0; }
 
-		// Calculate coordinates
-		coords = this._calculateTip(mimic);
-
 		// Determine tip size
 		newSize = this.size = this._calculateSize(corner);
 		tip.css({
@@ -319,9 +323,6 @@ $.extend(Tip.prototype, {
 			lineHeight: newSize[1]+'px'
 		});
 
-		// Calculate coordinates
-		HASCANVAS && (bigCoords = this._calculateTip(mimic));
-
 		// Calculate tip translation
 		if(corner.precedance === Y) {
 			translate = [
@@ -338,34 +339,44 @@ $.extend(Tip.prototype, {
 
 		// Canvas drawing implementation
 		if(HASCANVAS) {
-			// Set the canvas size using calculated size
-			inner.attr(WIDTH, newSize[0]).attr(HEIGHT, newSize[1]);
-
 			// Grab canvas context and clear/save it
 			context = inner[0].getContext('2d');
 			context.restore(); context.save();
 			context.clearRect(0,0,6000,6000);
 
+			scale = PIXEL_RATIO / context.webkitBackingStorePixelRatio;
+
+			// Calculate coordinates
+			coords = this._calculateTip(mimic, curSize, scale);
+			bigCoords = this._calculateTip(mimic, this.size, scale);
+
+			// Set the canvas size using calculated size
+			inner.attr(WIDTH, newSize[0] * scale).attr(HEIGHT, newSize[1] * scale);
+			inner.css(WIDTH, newSize[0]).css(HEIGHT, newSize[1]);
+
 			// Draw the outer-stroke tip
 			this._drawCoords(context, bigCoords);
 			context.fillStyle = color[1];
 			context.fill();
 
 			// Draw the actual tip
-			context.translate(translate[0], translate[1]);
+			context.translate(translate[0] * scale, translate[1] * scale);
 			this._drawCoords(context, coords);
 			context.fillStyle = color[0];
 			context.fill();
 		}
 
 		// VML (IE Proprietary implementation)
 		else {
+			// Calculate coordinates
+			coords = this._calculateTip(mimic);
+
 			// Setup coordinates string
 			coords = 'm' + coords[0] + ',' + coords[1] + ' l' + coords[2] +
 				',' + coords[3] + ' ' + coords[4] + ',' + coords[5] + ' xe';
 
 			// Setup VML-specific offset for pixel-perfection
-			translate[2] = border && /^(r|b)/i.test(corner.string()) ? 
+			translate[2] = border && /^(r|b)/i.test(corner.string()) ?
 				BROWSER.ie === 8 ? 2 : 1 : 0;
 
 			// Set initial CSS