D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
syntagmatic
Full window
Github gist
Canvas Simple Mouse Interaction
<canvas id="picture" width=960 height=500></canvas> <script> var canvas = document.getElementById("picture"); var ctx = canvas.getContext("2d"); var width = canvas.width; var height = canvas.height; ctx.translate(width/2,height/2); ctx.globalAlpha = 0.4; ctx.globalCompositeOperation = "darker"; function render(x) { ctx.fillStyle = "hsl(" + Math.round(x) + ",50%,50%)"; ctx.rotate(0.03); ctx.fillRect(10,10,2,x); }; canvas.addEventListener("mousemove", function(e) { var x = 1000/Math.sqrt(Math.abs(e.pageX-width/2)); render(x); }); </script>