demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
	<head> 
		<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        <title>Undo and Redo</title>
        
        <script type="text/javascript" src="js/undomanager.js"></script>
        <script type="text/javascript" src="js/circledrawer.js"></script>
                
        <script>
            window.onload = function() {
            	// with jquery this would be on documentready
            	
            	var undoManager = new UndoManager();
            	var circleDrawer = new CircleDrawer('view');
            	circleDrawer.setUndoManager(undoManager);
            	
            	var btnUndo = document.getElementById('btnUndo');
            	var btnRedo = document.getElementById('btnRedo');
            	var btnClear = document.getElementById('btnClear');
            	
            	function updateUI() {
            		btnUndo.disabled = !undoManager.hasUndo();
            		btnRedo.disabled = !undoManager.hasRedo();
            	}
            	undoManager.setCallback(updateUI);

				btnUndo.onclick = function() {
					undoManager.undo();
					updateUI();
				}
				btnRedo.onclick = function() {
					undoManager.redo();
					updateUI();
				}
				btnClear.onclick = function() {
					undoManager.clear();
					updateUI();
				}
				
				updateUI();
			}   
        </script>
        <style type="text/css" media="all"> 
        	body {
        		font-family:arial, sans-serif;
        	}
        	#view {
        		margin:.5em 0 .25em 0;
        		border:1px solid #ccc;
        	}
        	.comment {
        		color:#999;
        		font-size:small;
        	}
        </style>
    </head>  
    <body>
		<div class="commands">
			<button id="btnUndo" href="#">Undo</button>
			<button id="btnRedo" href="#">Redo</button>
			<button id="btnClear" href="#">Clear memory</button>
		</div>
		<div>
			<canvas id="view" width="300" height="150"></canvas>
		</div>
		<span class="comment">Click on the area to create circles</span>
    </body>  
</html>  