Производительность-мудрый - холст против базового URI изображения против

Я создаю цветовое колесо (палитру) и хочу знать самый быстрый и эффективный способ отображения цветового колеса. В настоящее время я использую JavaScript для его создания с помощью холста. Я думаю, что другие варианты-это реальное изображение или URI данных. Если есть более быстрый способ, пожалуйста, дайте мне знать.

Какой самый быстрый и эффективный способ показать палитру цветов?

Цветовое колесо с использованием JavaScript / canvas

JSFiddle

var colorDisc = document.getElementById('surface'),
  colorDiscRadius = colorDisc.offsetHeight / 2;

var drawDisk = function(ctx, coords, radius, steps, colorCallback) {
    var x = coords[0] || coords, // coordinate on x-axis
      y = coords[1] || coords, // coordinate on y-axis
      a = radius[0] || radius, // radius on x-axis
      b = radius[1] || radius, // radius on y-axis
      angle = 360,
      rotate = 0,
      coef = Math.PI / 180;

    ctx.save();
    ctx.translate(x - a, y - b);
    ctx.scale(a, b);

    steps = (angle / steps) || 360;

    for (; angle > 0; angle -= steps) {
      ctx.beginPath();
      if (steps !== 360) ctx.moveTo(1, 1); // stroke
      ctx.arc(1, 1, 1, (angle - (steps / 2) - 1) * coef, (angle + (steps / 2) + 1) * coef);

      if (colorCallback) {
        colorCallback(ctx, angle);
      } else {
        ctx.fillStyle = 'black';
        ctx.fill();
      }
    }
    ctx.restore();
  },
  drawCircle = function(ctx, coords, radius, color, width) { // uses drawDisk
    width = width || 1;
    radius = [
      (radius[0] || radius) - width / 2, (radius[1] || radius) - width / 2
    ];
    drawDisk(ctx, coords, radius, 1, function(ctx, angle) {
      ctx.restore();
      ctx.lineWidth = width;
      ctx.strokeStyle = color || '#000';
      ctx.stroke();
    });
  };

if (colorDisc.getContext) {
  drawDisk( // HSV color wheel with white center
    colorDisc.getContext("2d"), [colorDisc.width / 2, colorDisc.height / 2], [colorDisc.width / 2 - 1, colorDisc.height / 2 - 1],
    360,
    function(ctx, angle) {
      var gradient = ctx.createRadialGradient(1, 1, 1, 1, 1, 0);
      gradient.addColorStop(0, 'hsl(' + (360 - angle + 0) + ', 100%, 50%)');
      gradient.addColorStop(1, "#FFFFFF");

      ctx.fillStyle = gradient;
      ctx.fill();
    }
  );
  drawCircle( // gray border
    colorDisc.getContext("2d"), [colorDisc.width / 2, colorDisc.height / 2], [colorDisc.width / 2, colorDisc.height / 2],
    '#555',
    3
  );
}

<canvas id="surface" width="500" height="500"></canvas>