[ Mini Kiebo ]

Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586 Path: D:/Backup/05122024/htdocs/pmb2/assets/New folder/ExplorerCanvas-master/testcases/ [ Home ]
File: colors.html
<!DOCTYPE html>
<html>
<head>
<title>Color Test</title>
<style>

#color {
  position: fixed;
  top: 0;
  left: 250px;
}
</style>
<!--[if IE]><script src="../excanvas.js"></script><![endif]-->
<script>

var colors = [
  'aliceblue',
  'antiquewhite',
  'aqua',
  'aquamarine',
  'azure',
  'beige',
  'bisque',
  'black',
  'blanchedalmond',
  'blue',
  'blueviolet',
  'brown',
  'burlywood',
  'cadetblue',
  'chartreuse',
  'chocolate',
  'coral',
  'cornflowerblue',
  'cornsilk',
  'crimson',
  'cyan',
  'darkblue',
  'darkcyan',
  'darkgoldenrod',
  'darkgray',
  'darkgreen',
  'darkgrey',
  'darkkhaki',
  'darkmagenta',
  'darkolivegreen',
  'darkorange',
  'darkorchid',
  'darkred',
  'darksalmon',
  'darkseagreen',
  'darkslateblue',
  'darkslategray',
  'darkslategrey',
  'darkturquoise',
  'darkviolet',
  'deeppink',
  'deepskyblue',
  'dimgray',
  'dimgrey',
  'dodgerblue',
  'firebrick',
  'floralwhite',
  'forestgreen',
  'fuchsia',
  'gainsboro',
  'ghostwhite',
  'gold',
  'goldenrod',
  'gray',
  'grey',
  'green',
  'greenyellow',
  'honeydew',
  'hotpink',
  'indianred',
  'indigo',
  'ivory',
  'khaki',
  'lavender',
  'lavenderblush',
  'lawngreen',
  'lemonchiffon',
  'lightblue',
  'lightcoral',
  'lightcyan',
  'lightgoldenrodyellow',
  'lightgreen',
  'lightgrey',
  'lightpink',
  'lightsalmon',
  'lightseagreen',
  'lightskyblue',
  'lightslategray',
  'lightslategrey',
  'lightsteelblue',
  'lightyellow',
  'lime',
  'limegreen',
  'linen',
  'magenta',
  'maroon',
  'mediumaquamarine',
  'mediumblue',
  'mediumorchid',
  'mediumpurple',
  'mediumseagreen',
  'mediumslateblue',
  'mediumspringgreen',
  'mediumturquoise',
  'mediumvioletred',
  'midnightblue',
  'mintcream',
  'mistyrose',
  'moccasin',
  'navajowhite',
  'navy',
  'oldlace',
  'olive',
  'olivedrab',
  'orange',
  'orangered',
  'orchid',
  'palegoldenrod',
  'palegreen',
  'paleturquoise',
  'palevioletred',
  'papayawhip',
  'peachpuff',
  'peru',
  'pink',
  'plum',
  'powderblue',
  'purple',
  'red',
  'rosybrown',
  'royalblue',
  'saddlebrown',
  'salmon',
  'sandybrown',
  'seagreen',
  'seashell',
  'sienna',
  'silver',
  'skyblue',
  'slateblue',
  'slategray',
  'slategrey',
  'snow',
  'springgreen',
  'steelblue',
  'tan',
  'teal',
  'thistle',
  'tomato',
  'turquoise',
  'violet',
  'wheat',
  'white',
  'whitesmoke',
  'yellow',
  'yellowgreen'
];

function drawNamedColors() {
  var el = document.getElementById('named');
  var ctx = el.getContext('2d');

  for (var i = 0; i < colors.length; i++) {
    ctx.fillStyle = colors[i];
    ctx.fillRect(0, i * 5, 100, 5);
  }
}

function drawRgbColors() {
  var el = document.getElementById('rgb');
  var ctx = el.getContext('2d');

  for (var y = 0; y < 100; y += 5) {
    for (var x = 0; x < 100; x += 5) {
      ctx.fillStyle = 'rgb(0%, ' + x + '%, ' + y  + '%)';
      ctx.fillRect(x, y, 10, 10);
    }
  }

  ctx.translate(0, 100);

  for (var y = 0; y < 100; y += 5) {
    for (var x = 0; x < 100; x += 5) {
      ctx.fillStyle = 'rgb(' + x + '%, 0%, ' + y + '%)';
      ctx.fillRect(x, y, 10, 10);
    }
  }

  ctx.translate(0, 100);

  for (var y = 0; y < 100; y += 5) {
    for (var x = 0; x < 100; x += 5) {
      ctx.fillStyle = 'rgb(' + x + '%, ' + y + '%, 0%)';
      ctx.fillRect(x, y, 10, 10);
    }
  }
}

function drawHslColors() {
  var el = document.getElementById('hsl');
  var ctx = el.getContext('2d');

  for (var y = 0; y < 100; y += 5) {
    for (var x = 0; x < 100; x += 5) {
      ctx.fillStyle = 'hsl(0, ' + x + '%, ' + y + '%)';
      ctx.fillRect(0 + x, y, 10, 10);
    }
  }

  ctx.translate(0, 100);

  for (var y = 0; y < 100; y += 5) {
    for (var x = 0; x < 360; x += 18) {
      ctx.fillStyle = 'hsl(' + x + ',50%, ' + y + '%)';
      ctx.fillRect(x / 3.6, y, 10, 10);
    }
  }

  ctx.translate(0, 100);

  for (var y = 0; y < 100; y += 5) {
    for (var x = 0; x < 360; x += 18) {
      ctx.fillStyle = 'hsl(' + x + ', ' + y + '%, 50%)';
      ctx.fillRect(x / 3.6, y, 10, 10);
    }
  }

  ctx.save();
  ctx.translate(50, 200);

  for (var r = 0; r < 45; r += 5) {
    for (var a = 0; a < 360; a += 18) {
      ctx.save();

      ctx.rotate(a * Math.PI / 180);
      ctx.translate(0, r);
      ctx.fillStyle = 'hsl(' + a + ', 100%, ' + r + '%)';
      var w = Math.max(5, r / 3);
      ctx.fillRect(-w / 2, -w / 2, w, w);

      ctx.restore();
    }
  }

  ctx.restore();
}

window.onload = function() {
  drawNamedColors();
  drawRgbColors();
  drawHslColors();
};

</script>
</head>
<body>

<canvas id=named width=100 height=730></canvas>
<canvas id=rgb width=100 height=730></canvas>
<canvas id=hsl width=100 height=730></canvas>
<div id=color></div>



</body>
</html>