Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
32 lines (32 sloc) 1.29 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculated drop shadow</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="calcdropshadow.css" type="text/css">
</head>
<body>
<header><h1>Calculated drop shadow</h1>
<p>This is a small demo showing you how you could dynamically calculate the drop shadow of a canvas object with a different object as the light source. Works in 2D. You can <a href="https://github.com/codepo8/calculated-shadow">get the source from GitHub</a> and
<a href="http://hacks.mozilla.org/2011/08/calculated-drop-shadows-in-html5-canvas">read the blog post</a> showing a step by step explanation.</p>
</header>
<section>
<canvas></canvas> <!-- Kann was! -->
<form>
<div><input type="checkbox" id="controlline">
<label for="controlline">show control line</label></div>
<div><input type="checkbox" id="animate" checked>
<label for="animate">Animate (disable for mouse control)</label></div>
<output></output>
</form>
</section>
<footer>
<p>Written by
<a href="http://wait-till-i.com/">Chris Heilmann</a>
(<a href="http://twitter.com/codepo8">@codepo8</a>)
</p>
</footer>
<script src="calcdropshadow.js"></script>
</body>
</html>