Hey DaveCoate,
I have created below sample by taking reference to below link.
Please refer below sample.
https://zipso.net/a-simple-touchscreen-sketchpad-using-javascript-and-html5/
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
#sketchpadapp
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.leftside
{
float: left;
width: 220px;
height: 285px;
background-color: #def;
padding: 10px;
border-radius: 4px;
}
.rightside
{
float: left;
margin-left: 10px;
}
#sketchpad
{
float: left;
height: 300px;
width: 400px;
border: 2px solid #888;
border-radius: 4px;
position: relative;
}
#clear_button, #save_button
{
float: left;
font-size: 15px;
padding: 10px;
-webkit-appearance: none;
background: #eee;
border: 1px solid #888;
margin-bottom: 5px;
}
#save_remote
{
float: left;
margin-left: 5px;
}
.save_box
{
border: 1px solid #bbb;
border-radius: 4px;
padding: 5px;
clear: both;
}
#image_display
{
width: 80px;
height: 60px;
border: 1px solid #000;
margin: 15px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
var canvas, ctx;
var mouseX, mouseY, mouseDown = 0;
var touchX, touchY;
function drawDot(ctx, x, y, size) {
r = 0; g = 0; b = 0; a = 255;
ctx.fillStyle = "rgba(" + r + "," + g + "," + b + "," + (a / 255) + ")";
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
function sketchpad_mouseDown() {
mouseDown = 1;
drawDot(ctx, mouseX, mouseY, 12);
}
function sketchpad_mouseUp() {
mouseDown = 0;
updateImageLocal(canvas);
}
function sketchpad_mouseMove(e) {
getMousePos(e);
if (mouseDown == 1) {
drawDot(ctx, mouseX, mouseY, 12);
}
}
function getMousePos(e) {
if (!e)
var e = event;
if (e.offsetX) {
mouseX = e.offsetX;
mouseY = e.offsetY;
}
else if (e.layerX) {
mouseX = e.layerX;
mouseY = e.layerY;
}
}
function sketchpad_touchStart() {
getTouchPos();
drawDot(ctx, touchX, touchY, 12);
event.preventDefault();
}
function sketchpad_touchMove(e) {
getTouchPos(e);
drawDot(ctx, touchX, touchY, 12);
event.preventDefault();
}
function sketchpad_touchEnd(e) {
updateImageLocal(canvas);
}
function getTouchPos(e) {
if (!e)
var e = event;
if (e.touches) {
if (e.touches.length == 1) {
var touch = e.touches[0];
touchX = touch.pageX - touch.target.offsetLeft;
touchY = touch.pageY - touch.target.offsetTop;
}
}
}
function init() {
canvas = document.getElementById('sketchpad');
if (canvas.getContext)
ctx = canvas.getContext('2d');
if (ctx) {
canvas.addEventListener('mousedown', sketchpad_mouseDown, false);
canvas.addEventListener('mousemove', sketchpad_mouseMove, false);
window.addEventListener('mouseup', sketchpad_mouseUp, false);
canvas.addEventListener('touchstart', sketchpad_touchStart, false);
canvas.addEventListener('touchmove', sketchpad_touchMove, false);
canvas.addEventListener('touchend', sketchpad_touchEnd, false);
}
}
function ConvertToImage(btnSave) {
var base64 = $('#sketchpad')[0].toDataURL();
$("[id*=hfImageData]").val(base64);
__doPostBack(btnSave.name, "");
};
</script>
</head>
<body onload="init()">
<form id="form1" runat="server">
<div>
<canvas id="sketchpad" height="200" width="500">
</canvas>
<br />
<br />
<asp:HiddenField ID="hfImageData" runat="server" />
<asp:Button ID="Button1" Text="Save" runat="server" OnClientClick="return ConvertToImage(this)"
OnClick="Save" />
</div>
</form>
</body>
</html>
Namespaces
C#
using System.IO;
VB.Net
Imports System.IO
Code
C#
protected void Save(object sender, EventArgs e)
{
string base64 = Request.Form[hfImageData.UniqueID].Split(',')[1];
byte[] bytes = Convert.FromBase64String(base64);
string filePath = string.Format("~/Files/{0}.png", Path.GetRandomFileName());
File.WriteAllBytes(Server.MapPath(filePath), bytes);
}
VB.Net
Protected Sub Save(ByVal sender As Object, ByVal e As EventArgs)
Dim base64 As String = Request.Form(hfImageData.UniqueID).Split(",")(1)
Dim bytes() As Byte = Convert.FromBase64String(base64)
Dim filePath As String = String.Format("~/Files/{0}.png", Path.GetRandomFileName)
File.WriteAllBytes(Server.MapPath(filePath), bytes)
End Sub