Если вам не нужна сложная анимация, вы выполняли крайне ненужные вычисления для градиента. Смысл градиента в том, что вы задаете ему начальные значения, и он автоматически генерирует все промежуточное значение.
Я обработал градиент образца, который похож на ваше эталонное изображение: http://jsfiddle.net/ZFayC/2/
Обратите внимание, что ваше эталонное изображение может иметь небольшое количество текстуры, и что градиент определенно не является линейным. Если вы хотите заново создать эталонное изображение, вам придется использовать некоторые радиальные градиенты и, возможно, наложить текстуру.
Также обратите внимание, что вы устанавливали холст width и height через свойства CSS. С помощью элемента canvas элементы CSS width и height управляют увеличением элемента, а атрибуты уровня DOM - фактическими размерами.
Редактировать: Я полностью упустил тот факт, что вы хотели создать анимированный градиент. Мои извинения за это.
Я вернулся и отредактировал мой пример, чтобы плавно переходить между тремя предопределенными цветами, подобными тем, что на вашем эталонном изображении. Вы можете посмотреть обновленный пример здесь:
http://jsfiddle.net/fkU4Q/
Это больше похоже на то, что вы ищете?
Редактировать: Вот еще одно обновление, которое добавляет поддержку полного экрана, диагональный градиент и вторичный радиальный градиент, который накладывается в середине, чтобы помочь придать некоторое разнообразие:
http://jsfiddle.net/fkU4Q/2/
Возможно, вы захотите немного изменить цвета, чтобы увеличить вариацию, но, надеюсь, функциональность уже есть.