Skip to content

Instantly share code, notes, and snippets.

@nateinaction

nateinaction/spectrum.html

Last active September 3, 2017 18:21
Show Gist options
  • Save nateinaction/fb52d35d1eabc586e663c3f83a30963d to your computer and use it in GitHub Desktop.
Save nateinaction/fb52d35d1eabc586e663c3f83a30963d to your computer and use it in GitHub Desktop.
Download ZIP
Light spectrum displayed with HTML 5 canvas gradient
Raw
spectrum.html
<html>
<body>
<canvas id="light-spectrum" width="600" height="300"></canvas>
<script>
/*
* deep-violet | 380 | 0
* violet | 400 | 0.05
* blue | 450 | 0.175
* cyan | 450 | 0.2125
* green | 450 | 0.35
* yellow | 450 | 0.4625
* red | 650 | 0.675
* deep-red | 780 | 0.1
*/
var canvas = document.getElementById("light-spectrum");
var plane = canvas.getContext("2d");
var gradient = plane.createLinearGradient(0, 0, 600, 0);
gradient.addColorStop(0, 'rgba(128,0,128,1)');
gradient.addColorStop(0.05, 'rgba(255,0,255,1)');
gradient.addColorStop(0.175, 'rgba(0,0,255,1)');
gradient.addColorStop(0.2125, 'rgba(0,255,255,1)');
gradient.addColorStop(0.35, 'rgba(0,255,0,1)');
gradient.addColorStop(0.4625, 'rgba(255,255,0,1)');
gradient.addColorStop(0.675, 'rgba(255,0,0,1)');
gradient.addColorStop(1, 'rgba(128,0,0,1)');
plane.fillStyle = gradient;
plane.fillRect(0, 0, 600, 300);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment