index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>ansiedit</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="toolbar.js" type="text/javascript"></script>
<script src="editor.js" type="text/javascript"></script>
<script src="tools/freehand.js" type="text/javascript"></script>
<script src="tools/fill.js" type="text/javascript"></script>
<script src="tools/charbrush.js" type="text/javascript"></script>
<script src="tools/undo.js" type="text/javascript"></script>
<script src="tools/clear.js" type="text/javascript"></script>
<script src="tools/export.js" type="text/javascript"></script>
</head>
<body>
<div class="editor-container">
<div id="toolkit">
<div id="tools">
</div>
<div id="palette">
</div>
<div id="export">
</div>
</div>
<div id="editor">
</div>
<div id="preview">
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function () {
"use strict";
var toolbar, editor;
toolbar = toolbarWidget();
editor = editorCanvas(100, window.devicePixelRatio > 1);
editor.init(document.getElementById("editor"));
toolbar.addTool(freehandTool(editor), {"keyCode": 102, "symbol": "f"}).select();
toolbar.addTool(fillTool(editor), {"keyCode": 110, "symbol": "n"});
toolbar.addTool(charBrushTool("Shading", editor, [{"charCode": editor.codepage.LIGHT_SHADE, "name": "Light"}, {"charCode": editor.codepage.MEDIUM_SHADE, "name": "Medium"}, {"charCode": editor.codepage.DARK_SHADE, "name": "Dark"}]), {"keyCode": 115, "symbol": "s"});
toolbar.addTool(charBrushTool("Dot", editor, [{"charCode": editor.codepage.MIDDLE_DOT, "name": "Small"}, {"charCode": editor.codepage.BULLET_OPERATOR, "name": "Large"}]), {"keyCode": 100, "symbol": "d"});
toolbar.addTool(undoTool(editor), {"keyCode": 122, "symbol": "z"});
toolbar.addTool(clearTool(editor));
toolbar.addTool(exportTool(editor), {"keyCode": 101, "symbol": "e"});
}());
</script>>
</body>
</html>
