CaG Paint
HTML
<!DOCTYPE HTML>
<html>
<body>
<div id='colors'>
<button id='black' onclick='changeColor("black")' ontouchstart='changeColor("black")'></button>
<button id='red' onclick='changeColor("red")' ontouchstart='changeColor("red")'></button>
<button id='green' onclick='changeColor("green")' ontouchstart='changeColor("green")'></button>
<button id='blue' onclick='changeColor("blue")' ontouchstart='changeColor("blue")'></button>
<button id='orange' onclick='changeColor("orange")' ontouchstart='changeColor("orange")'></button>
<button id='pink' onclick='changeColor("pink")' ontouchstart='changeColor("pink")'></button>
</div>
<canvas id='canvas' width='300' height='200'></canvas>
<div>
<button onclick='clearCanvas()'>Clear</button>
</div>
</body>
</html>
<style>
#canvas
{
border: 1px solid black;
margin: 10px 0 10px 0;
cursor: pointer;
}
#colors button
{
width: 40px;
height: 40px;
border-radius: 100%;
margin-top: 0px;
}
#black
{
background: black;
}
#pink
{
background: pink;
}
#red
{
background: red;
}
#green
{
background: green;
}
#blue
{
background: blue;
}
#orange
{
background: orange;
}
</style>
<script>
var arr_touches = [];
var canvas;
var ctx;
var down = false; //mouse is pressed
var color = 'black'; //default drawing color
var width = 5; // drawing width
//calling window.onload to make sure the HTML is loaded
window.onload = function() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.lineWidth = width;
//handling mouse click and move events
canvas.addEventListener('mousemove', handleMove);
canvas.addEventListener('mousedown', handleDown);
canvas.addEventListener('mouseup', handleUp);
//handling mobile touch events
canvas.addEventListener("touchstart", handleStart, false);
canvas.addEventListener("touchend", handleEnd, false);
canvas.addEventListener("touchcancel", handleCancel, false);
canvas.addEventListener("touchleave", handleEnd, false);
canvas.addEventListener("touchmove", handleTouchMove, false);
};
function handleMove(e)
{
xPos = e.clientX-canvas.offsetLeft;
yPos = e.clientY-canvas.offsetTop;
if(down == true)
{
ctx.lineTo(xPos,yPos); //create a line from old point to new one
ctx.strokeStyle = color;
ctx.stroke();
}
}
function handleDown()
{
down = true;
ctx.beginPath();
ctx.moveTo(xPos, yPos);
}
function handleUp()
{
down = false;
}
function handleStart(evt)
{
var touches = evt.changedTouches;
for(var i = 0; i < touches.length; i++)
{
if(isValidTouch(touches[i]))
{
evt.preventDefault();
arr_touches.push(copyTouch(touches[i]));
ctx.beginPath();
ctx.fillStyle = color;
ctx.fill();
}
}
}
function handleTouchMove(evt)
{
var touches = evt.changedTouches;
var offset = findPos(canvas);
for (var i = 0; i < touches.length; i++)
{
if(isValidTouch(touches[i]))
{
evt.preventDefault();
var idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0)
{
ctx.beginPath();
ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
ctx.strokeStyle = color;
ctx.stroke();
arr_touches.splice(idx, 1, copyTouch(touches[i]));
}
}
}
}
function handleEnd(evt)
{
var touches = evt.changedTouches;
var offset = findPos(canvas);
for (var i = 0; i < touches.length; i++)
{
if(isValidTouch(touches[i]))
{
evt.preventDefault();
var idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0)
{
ctx.lineWidth = 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
arr_touches.splice(i, 1);
}
}
}
}
function handleCancel(evt)
{
evt.preventDefault();
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
arr_touches.splice(i, 1);
}
}
function copyTouch(touch)
{
return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
}
function ongoingTouchIndexById(idToFind)
{
for (var i = 0; i < arr_touches.length; i++) {
var id = arr_touches[i].identifier;
if (id == idToFind) {
return i;
}
}
return -1;
}
function changeColor(new_color)
{
color = new_color;
}
function clearCanvas()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function isValidTouch(touch)
{
var curleft = 0, curtop = 0;
var offset = 0;
if (canvas.offsetParent) {
do {
curleft += canvas.offsetLeft;
curtop += canvas.offsetTop;
} while (touch == canvas.offsetParent);
offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
}
if(touch.clientX-offset.x > 0 &&
touch.clientX-offset.x < parseFloat(canvas.width) &&
touch.clientY-offset.y >0 &&
touch.clientY-offset.y < parseFloat(canvas.height)) {
return true;
}
else
{
return false;
}
}
function findPos(obj)
{
var curleft = 0, curtop = 0;
if (obj.offsetParent)
{
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj == obj.offsetParent);
return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
}
}
</script>
CSS
#canvas
{
border: 1px solid black;
margin: 10px 0 10px 0;
cursor: pointer;
}
#colors button
{
width: 40px;
height: 40px;
border-radius: 100%;
margin-top: 0px;
}
#black
{
background: black;
}
#pink
{
background: pink;
}
#red
{
background: red;
}
#green
{
background: green;
}
#blue
{
background: blue;
}
#orange
{
background: orange;
}
JAVASCRIPT
var arr_touches = [];
var canvas;
var ctx;
var down = false; //mouse is pressed
var color = 'black'; //default drawing color
var width = 5; // drawing width
//calling window.onload to make sure the HTML is loaded
window.onload = function() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
ctx.lineWidth = width;
//handling mouse click and move events
canvas.addEventListener('mousemove', handleMove);
canvas.addEventListener('mousedown', handleDown);
canvas.addEventListener('mouseup', handleUp);
//handling mobile touch events
canvas.addEventListener("touchstart", handleStart, false);
canvas.addEventListener("touchend", handleEnd, false);
canvas.addEventListener("touchcancel", handleCancel, false);
canvas.addEventListener("touchleave", handleEnd, false);
canvas.addEventListener("touchmove", handleTouchMove, false);
};
function handleMove(e)
{
xPos = e.clientX-canvas.offsetLeft;
yPos = e.clientY-canvas.offsetTop;
if(down == true)
{
ctx.lineTo(xPos,yPos); //create a line from old point to new one
ctx.strokeStyle = color;
ctx.stroke();
}
}
function handleDown()
{
down = true;
ctx.beginPath();
ctx.moveTo(xPos, yPos);
}
function handleUp()
{
down = false;
}
function handleStart(evt)
{
var touches = evt.changedTouches;
for(var i = 0; i < touches.length; i++)
{
if(isValidTouch(touches[i]))
{
evt.preventDefault();
arr_touches.push(copyTouch(touches[i]));
ctx.beginPath();
ctx.fillStyle = color;
ctx.fill();
}
}
}
function handleTouchMove(evt)
{
var touches = evt.changedTouches;
var offset = findPos(canvas);
for (var i = 0; i < touches.length; i++)
{
if(isValidTouch(touches[i]))
{
evt.preventDefault();
var idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0)
{
ctx.beginPath();
ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
ctx.strokeStyle = color;
ctx.stroke();
arr_touches.splice(idx, 1, copyTouch(touches[i]));
}
}
}
}
function handleEnd(evt)
{
var touches = evt.changedTouches;
var offset = findPos(canvas);
for (var i = 0; i < touches.length; i++)
{
if(isValidTouch(touches[i]))
{
evt.preventDefault();
var idx = ongoingTouchIndexById(touches[i].identifier);
if (idx >= 0)
{
ctx.lineWidth = 4;
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(arr_touches[idx].clientX-offset.x, arr_touches[idx].clientY-offset.y);
ctx.lineTo(touches[i].clientX-offset.x, touches[i].clientY-offset.y);
arr_touches.splice(i, 1);
}
}
}
}
function handleCancel(evt)
{
evt.preventDefault();
var touches = evt.changedTouches;
for (var i = 0; i < touches.length; i++) {
arr_touches.splice(i, 1);
}
}
function copyTouch(touch)
{
return {identifier: touch.identifier,clientX: touch.clientX,clientY: touch.clientY};
}
function ongoingTouchIndexById(idToFind)
{
for (var i = 0; i < arr_touches.length; i++) {
var id = arr_touches[i].identifier;
if (id == idToFind) {
return i;
}
}
return -1;
}
function changeColor(new_color)
{
color = new_color;
}
function clearCanvas()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function isValidTouch(touch)
{
var curleft = 0, curtop = 0;
var offset = 0;
if (canvas.offsetParent) {
do {
curleft += canvas.offsetLeft;
curtop += canvas.offsetTop;
} while (touch == canvas.offsetParent);
offset = { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
}
if(touch.clientX-offset.x > 0 &&
touch.clientX-offset.x < parseFloat(canvas.width) &&
touch.clientY-offset.y >0 &&
touch.clientY-offset.y < parseFloat(canvas.height)) {
return true;
}
else
{
return false;
}
}
function findPos(obj)
{
var curleft = 0, curtop = 0;
if (obj.offsetParent)
{
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj == obj.offsetParent);
return { x: curleft-document.body.scrollLeft, y: curtop-document.body.scrollTop };
}
}
