さて，スクリプト全文です．
細かい装飾や表示位置は自分で変更してみてください．
<!DOCTYPE html>
<html>
<head>
<title>camera paint</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで スマホの挙動を制限している -->
<script src="megapix-image.js"></script><!-- 外部の便利なライブラリを読み込んでいる -->
</head>
<body>
<h1>camera</h1>
カメラを起動，又は写真を選択<br>
<input type="file" accept="image/*" capture="camera" id="mycam" onchange="myCamera(mycam)"/>
<br>
<canvas id="myCanvas" style="border:1px solid #000000;"></canvas>
<script type="text/javascript">
var canvas;
var camCanvas;
var paintSwitch = false;
var oldX = 0;
var oldY = 0;
var myColor = "rgb(255,0,0)";//色を動的に変えられるようにするために変数宣言しちゃう
var myLine = 0;
//---スマホのOS取得
var ua = navigator.userAgent;//User Agent（まぁ機種名みたいなの）を取得して変数uaに代入しなさい
//---
//以下iPhoneの時の挙動
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
//特に挙動はまだ決めていない
}
//以下Androidの時の挙動
if (ua.indexOf("Android") >= 0){
//特に挙動はまだ決めていない
}
//---------
window.onload = function() {//これ読み込んだ時に，，，
syokika();//syokikaを実行してね
}
function syokika(){//で，これがsyokikaね
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
//--ここからスマホのタッチの挙動＜−NEW!!
canvas.addEventListener("touchmove",myTouchDraw,false);
canvas.addEventListener("touchstart",myTouchStart,false);
canvas.addEventListener("touchend",myTouchEnd,false);
}
//--タッチの挙動ここから
function myTouchStart(atai){
paintSwitch = true;
oldX = atai.touches[0].pageX - canvas.offsetLeft;//オフセット（ずれ）の修正＝よこ
oldY = atai.touches[0].pageY - canvas.offsetTop;//オフセット（ずれ）の修正＝たて
}
function myTouchEnd(){
paintSwitch = false;
}
//--タッチの挙動ここまで
//--カメラの画像
function myCamera(mycam){
var myFile = mycam.files[0];
new MegaPixImage(myFile).render(myCanvas, { width : 300});
}
//--カメラの画像処理ここまで
function myWidth(myWidth){
myLine = myWidth;
}
function myTouchDraw(atai) {
if (!paintSwitch) return;
atai.preventDefault();//これすると縦スクロールがなくなる
var x = atai.touches[0].pageX - canvas.offsetLeft;//なんかタッチの場合はpageXじゃないとだめ
var y = atai.touches[0].pageY - canvas.offsetTop;//なんかタッチの場合はpageYじゃないとだめ
var context = canvas.getContext("2d");
context.strokeStyle = myColor;//色は動的に変えられるように変数にすちゃったよね
context.lineWidth = myLine;//線の太さ
context.beginPath();//線を描き始めます
context.moveTo(oldX, oldY);//この点から
context.lineTo(x, y);//この点まで
context.stroke();//描いてね
context.closePath();//線はここまで
oldX = x;
oldY = y;
}
function myRed(){
myColor = "rgb(255,0,0)";
}
function myGreen(){
myColor = "rgb(0,255,0)";
}
function myBlu(){
myColor = "rgb(0,0,255)";
}
function myYel(){
myColor = "rgb(255,255,0)";
}
function myGray(){
myColor = "rgb(128,128,128)";
}
function myBlack(){
myColor = "rgb(0,0,0)";
}
//---画像に変換ボタンを押すとここにfunctionが実行される
function screenshot(){
var myimage = canvas.toDataURL();
//以下iPhoneの時の挙動 上の方で機種をグローバル変数uaに入れてあるのでifで機種が分かる
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
document.getElementById("newImg").src = myimage;//newImgeというIDを探してPNG入れてね
}
//以下Androidの時の挙動 上の方で機種をグローバル変数uaに入れてあるのでifで機種が分かる
if (ua.indexOf("Android") >= 0){
//androimageというiDがあるimgタグのソース（URL入れるところ）に入れちゃう
document.getElementById("androimage").src = myimage;
}
}
//---
</script>
<form>
<input type="button" value="RED" onclick="myRed()">
<input type="button" value="GREEEN" onclick="myGreen()">
<input type="button" value="BLUE" onclick="myBlu()">
<input type="button" value="YELLOW" onclick="myYel()">
<input type="button" value="GRAY" onClick="myGray()">
<input type="button" value="BLACK" onClick="myBlack()">
</form>
</ br>
<pre>
線の太さ<input id="myRange" value="1" type="range" max="10" min="1" step="0.1" onChange="myWidth(this.value)" />
</pre>
<hr>
<form>
<input type="button" value="画像に変換" onclick="screenshot()">
<!-- onclickでscreenshotというfunction実行してね -->
</form>
<div><img id="newImg"></div>
<!-- iPhone用です このDIVのIDを探してここに画像を入れる -->
</ br>
<img src="" id="androimage" border="1"><!-- Androidの時の画像保存用 -->
<pre>
画像を長押しして保存
</pre>
</body>
</html>