在当今的技术环境中，开发一个基于云的Web应用程序意味着不需要担心安装问题，因为它将易于更新和管理版本。此外，应用程序可以支持不同的平台，如Windows、Linux、iOS、Android等，这意味着用户可以在平板电脑、移动设备和个人电脑上运行应用程序，这在当前市场上非常重要。
虽然有许多基于云的浏览器应用程序，但有些应用程序要求安装插件或Silverlight，这并不是跨平台的应用程序，因为有些平台不支持插件或Silverlight，也不允许安装。HTML5技术可以解决大部分这些问题，本文将介绍一个使用HTML5和JavaScript的基本绘图应用程序。
从不同的代码共享网站和博客中收集了一些代码片段。要继续本教程，需要了解一些C#、ASP.NET、JavaScript和客户端-服务器技术的知识。请参考以获取每个HTML5对象的属性和事件的详细信息。
需要配置IIS来运行这个应用程序。配置IIS的步骤如下：
IIS现在已配置好。现在为默认浏览器启用弹出窗口和JavaScript。在浏览器地址栏中输入：http://mylocalmachine:8080/并按Enter。（用主机名和端口号替换。）
现在PaintBrush应用程序将启动。（可以在Visual Studio中打开解决方案文件[.sln]或项目文件[.csprj]并运行它）。运行这个应用程序，将得到一个独立的浏览器窗口，左侧有一个画布和工具箱。绘制、线条和正方形按钮是自由绘制项目。可以点击相应的按钮并在画布上开始绘制。
点击打开按钮将打开一个AJAX弹出窗口以选择图像文件。选择任何图像文件并点击确定。选定的图像文件将加载到画布上。
对于新的画布，可以通过点击页面大小按钮来调整宽度和高度。可以通过点击文本按钮并在画布上点击所需位置来在画布上添加文本。在弹出框中输入文本并按确定。
最后，有保存和退出选项。点击保存将在新窗口中打开图像。可以通过右键点击（右键点击并保存图像）或打印来保存图像。点击退出按钮将在用户确认后关闭应用程序。
正在制作一个应用程序，尽管它是在浏览器上运行的，但不需要浏览器的地址栏、状态栏、前进后退按钮。所以从Default.aspx页面打开一个新的应用程序窗口，没有所有这些额外的东西（PaintBrushCanvas.aspx）。
protected void Load_Complete(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Script", "", false);
}
在PaintBrushCanvas.aspx页面中，有一个两列的表格：一列是工具箱（左侧），另一列是画布（右侧）。画布应该放在一个容器内：
<div id="container">
这个容器定义了位置、溢出和滚动条基色样式。这将启用滚动条，如果画布大小超过屏幕尺寸。
所有的JavaScript代码都在CanvasUtils.js文件中。所有的样式都在StyleSheet.css文件中定义。应该从body标签的onload事件调用init()来初始化应用程序：
onload="init();"
Init()函数将创建画布对象的2D上下文，调整画布和容器的大小，连接所有画布事件，并选择默认工具。有一个工具数组来保存所有画布绘图工具：
var tools = {};
ev_canvas处理所有鼠标事件的画布，并重定向到选定的工具函数。
try {
if (ev.layerX || ev.layerX == 0) {
// Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) {
// Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
} catch (err) {
alert(err.message);
}
只使用基本的画布函数来绘制所有绘图工具，如：
使用了两层画布，顶层画布是透明的。所有手绘工具最初都绘制在顶层（透明）画布上，当鼠标抬起时（这意味着完成了连续绘制），使用img_update()函数更新到背景画布，并清除临时顶层画布。
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
当用户点击保存按钮时，使用toDataURL()函数将画布转换为Image对象，并在新窗口中打开Image：
var img = destinationCanvas.toDataURL("image/png");
WindowObject = window.open('', 'PrintPaintBrush', 'toolbars=no,scrollbars=yes,status=no,resizable=no');
WindowObject.document.open();
WindowObject.document.writeln('');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();