HTML5 Canvas Constellation Effect

Description

We already know how to use canvas to create a dark night sky of glittering stars, so now let's take it up a notch and use the HTML5 canvas feature to create an interactive constellation. This snippet creates a beautiful starry sky that responds to up/down arrows and scrolling. When you scroll or use a vertical arrow key, the stars in the canvas will join together to create a beautiful constellation. Reverse your scroll to see the stars return to their original positions. This snippet is adapted from a CodePen tutorial.

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<title>Canvas Constellations</title>
<style type="text/css">
html, body { 
  margin:0;
  padding:0;
  height:100%;
  background: url('http://carlossato.cocolog-nifty.com/photos/uncategorized/2012/05/28/img_4369.jpg') no-repeat;
  background-size:cover;
  background-color:black;
}
#container {
  overflow:hidden;
  position:relative;
}
h1 {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 360px;
  color: white;
  font-family: 'Rancho', sans-serif;
  font-size: 5em;
}
#stars {
  z-index:0;
  display: block;
  margin: 0 auto;
}
</style>

<body>

Canvas Cheat Sheet

HTML5 Canvas Constellation Effect

Description

Demo