Skip to content

Instantly share code, notes, and snippets.

@kartikmaji
Created March 5, 2015 12:19
Show Gist options
  • Select an option

  • Save kartikmaji/a2137d54f06e8a1f53ab to your computer and use it in GitHub Desktop.

Select an option

Save kartikmaji/a2137d54f06e8a1f53ab to your computer and use it in GitHub Desktop.
Trippy Design
<!DOCTYPE html>
<html>
<head>
<title>Trippy Design 1</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000; position: absolute;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
//canvas.width = window.innerWidth;
var ctx = canvas.getContext("2d");
var w = screen.width;
var h = screen.height;
x=200;
document.onmousemove = function(e){
x-=1;
if(x===0)
{
x=200;
}
cursorX = e.pageX;
cursorY = e.pageY;
ctx.fillStyle="#"+(cursorX%255).toString(16)+(cursorY%255).toString(16)+((cursorX+cursorY)%255).toString(16);
ctx.lineWidth = 1;
ctx.fillRect(200-x,200-x,2*x,2*x);
ctx.stroke();
console.log("Cursor at: " + cursorX + ", " + cursorY);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment