From 50f9a0b87e2947b5b9a94001670e2cc96d1695f3 Mon Sep 17 00:00:00 2001
From: ryleyb <ryleyb@gmail.com>
Date: Thu, 20 Jan 2011 12:14:25 -0800
Subject: [PATCH 1/2] Change how canvases are initialized for IE9

With this change, IE9 can use the canvas element properly.

It also works for IE6-8 using the new _makeCanvas function.
---
 demo/test.html    |  2 +-
 src/farbtastic.js | 30 ++++++++++++++----------------
 2 files changed, 15 insertions(+), 17 deletions(-)
diff --git a/demo/test.html b/demo/test.html
index 2897e0d..cb65866 100644
--- a/demo/test.html
+++ b/demo/test.html
@@ -5,7 +5,7 @@
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-  <!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/tags/m3/excanvas.compiled.js"></script><![endif]-->
+  <!--[if lte IE 8]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/tags/m3/excanvas.compiled.js"></script><![endif]-->
 	<title>Farbtastic v2</title>
 	<script type="text/javascript" charset="utf-8" src="../src/farbtastic.js"></script>
 	<script type="text/javascript" charset="utf-8">
diff --git a/src/farbtastic.js b/src/farbtastic.js
index 9cd688a..f06440e 100644
--- a/src/farbtastic.js
+++ b/src/farbtastic.js
@@ -75,6 +75,16 @@ $._farbtastic = function (container, options) {
   }
 
   /////////////////////////////////////////////////////
+  //excanvas-compatible building of canvases
+  fb._makeCanvas = function(className){
+    var c = document.createElement('canvas');
+    if (!c.getContext) { // excanvas hack
+        c = window.G_vmlCanvasManager.initElement(c);
+        c.getContext(); //this creates the excanvas children
+    }
+    $(c).addClass(className);
+    return c;
+  }
 
   /**
    * Initialize the color picker widget.
@@ -90,27 +100,15 @@ $._farbtastic = function (container, options) {
       .html(
         '<div class="farbtastic" style="position: relative">' +
           '<div class="farbtastic-solid"></div>' +
-          '<canvas class="farbtastic-mask"></canvas>' +
-          '<canvas class="farbtastic-overlay"></canvas>' +
         '</div>'
       )
+      .children('.farbtastic')
+        .append(fb._makeCanvas('farbtastic-mask'))
+        .append(fb._makeCanvas('farbtastic-overlay'))
+      .end()
       .find('*').attr(dim).css(dim).end()
       .find('div>*').css('position', 'absolute');
 
-    // IE Fix: Recreate canvas elements with doc.createElement and excanvas.
-    $.browser.msie && $('canvas', container).each(function () {
-      // Fetch info.
-      var attr = { 'class': $(this).attr('class'), style: this.getAttribute('style') },
-          e = document.createElement('canvas');
-      // Replace element.
-      $(this).before($(e).attr(attr)).remove();
-      // Init with explorerCanvas.
-      G_vmlCanvasManager && G_vmlCanvasManager.initElement(e);
-      // Set explorerCanvas elements dimensions and absolute positioning.
-      $(e).attr(dim).css(dim).css('position', 'absolute')
-        .find('*').attr(dim).css(dim);
-    });
-
     // Determine layout
     fb.radius = (options.width - options.wheelWidth) / 2 - 1;
     fb.square = Math.floor((fb.radius - options.wheelWidth / 2) * 0.7) - 1;

From b0b367b411f10452ada123fa735be0adbe2e2ef0 Mon Sep 17 00:00:00 2001
From: ryleyb <ryleyb@gmail.com>
Date: Thu, 20 Jan 2011 12:28:47 -0800
Subject: [PATCH 2/2] stop using the msie flag

Now that IE9 can actually use canvas elements...
---
 src/farbtastic.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/farbtastic.js b/src/farbtastic.js
index f06440e..3fa7c93 100644
--- a/src/farbtastic.js
+++ b/src/farbtastic.js
@@ -81,6 +81,7 @@ $._farbtastic = function (container, options) {
     if (!c.getContext) { // excanvas hack
         c = window.G_vmlCanvasManager.initElement(c);
         c.getContext(); //this creates the excanvas children
+        fb.usingExCanvas = true;
     }
     $(c).addClass(className);
     return c;
@@ -164,7 +165,7 @@ $._farbtastic = function (container, options) {
           // New color
           color2 = fb.pack(fb.HSLToRGB([d2, 1, 0.5]));
       if (i > 0) {
-        if ($.browser.msie) {
+        if (fb.usingExCanvas) {
           // IE's gradient calculations mess up the colors. Correct along the diagonals.
           var corr = (1 + Math.min(Math.abs(Math.tan(angle1)), Math.abs(Math.tan(Math.PI / 2 - angle1)))) / n;
           color1 = fb.pack(fb.HSLToRGB([d1 - 0.15 * corr, 1, 0.5]));
@@ -244,7 +245,7 @@ $._farbtastic = function (container, options) {
       fb.ctxMask.drawImage(buffer, 0, 0, sz + 1, sz + 1, -sq, -sq, sq * 2, sq * 2);
     }
     // Method #2: drawing commands (old Canvas).
-    else if (!$.browser.msie) {
+    else if (fb.usingExCanvas) {
       // Render directly at half-resolution
       var sz = Math.floor(size / 2);
       calculateMask(sz, sz, function (x, y, c, a) {
@@ -497,6 +498,8 @@ $._farbtastic = function (container, options) {
     callback: null
   }, options);
 
+  fb.usingExCanvas = false;
+
   // Initialize.
   fb.initWidget();
 
