Skip to content

Instantly share code, notes, and snippets.

@themorgantown

themorgantown/fingerpaiting.html

Created March 11, 2013 21:03
Show Gist options
  • Save themorgantown/5137727 to your computer and use it in GitHub Desktop.
Save themorgantown/5137727 to your computer and use it in GitHub Desktop.
Download ZIP
Fingerpainting example embedded in Tumult Hype. File here: http://cl.ly/0a0d1Y0m360p
Raw
fingerpaiting.html
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Finger Painting</title>
<script src="${resourcesFolderName}/modernizr-1.6.min.js"></script>
<script src="${resourcesFolderName}/finger_painting.js"></script>
</head>
<body>
<div>
<canvas id="canvas" width="500" height="500">
Your browser does not support the HTML 5 Canvas.
</canvas>
</div>
<div>
<h1>Finger Painting</h1>
<p>Click/tap a color below to select a color, and then drag/swipe on the
canvas above to draw a picture.</p>
<p>Color selected: <span id="color_chosen">Black</span></p>
<p>
<input type="button" id="Red" style="background-color: red; width: 25px; height: 25px;"/>
<input type="button" id="Orange" style="background-color: orange; width: 25px; height: 25px;"/>
<input type="button" id="Yellow" style="background-color: yellow; width: 25px; height: 25px;"/>
<input type="button" id="Green" style="background-color: green; width: 25px; height: 25px;"/>
<input type="button" id="Blue" style="background-color: blue; width: 25px; height: 25px;"/>
<input type="button" id="Purple" style="background-color: purple; width: 25px; height: 25px;"/>
<input type="button" id="Brown" style="background-color: brown; width: 25px; height: 25px;"/>
<input type="button" id="Black" style="background-color: black; width: 25px; height: 25px;"/>
<input type="button" id="White" style="background-color: white; width: 25px; height: 25px;"/>
</p>
<p><input type="button" id="reset_image" value="Reset Drawing"/></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment