HTML5入門その14-お絵かきツール2

お絵かきツール（PC版）です
<!DOCTYPE html>
<html>
<head>
<title>touch 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タグで　スマホの挙動を制限している -->
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas;
var paintSwitch = false;//pantSwitchというスイッチを作ってとりあえず最初はオフね
var oldX = 0;//クリック始めた位置のX座標を入れる
var oldY = 0;//クリック始めた位置のY座標を入れる

//---スマホのOS取得（PC用では使わない）
var ua = navigator.userAgent;//User Agent（まぁ機種名みたいなの）を取得して変数uaに代入しなさい
//---


//以下iPhoneの時の挙動（PC用では使わない）
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
//特に挙動はまだ決めていない
}

//以下Androidの時の挙動（PC用では使わない）
if (ua.indexOf("Android") >= 0){
//特に挙動はまだ決めていない
}


//---------
window.onload = function() {//これを読み込んだら
 syokika();//初期化というfunctionを実行してね
};

function syokika(){//で，これが初期化のfunction
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ


}

function myMove(atai){//クリック開始時に実行させて線の描き始めの場所をoldX,oldYに入れちゃうよfunction
        paintSwitch = true;
        oldX = atai.clientX - canvas.offsetLeft;//オフセット（ずれ）の修正＝よこ clientXの代わりにpageXを使うときもあるらしい
        oldY = atai.clientY - canvas.offsetTop;//オフセット（ずれ）の修正＝たて　clientYの代わりにpageYを使うときもあるらしい
}

function myMouseUp(){
		paintSwitch = false;//pantSwitchはオフね
}

//setInterval(draw, 10);//10msec起きに描いてね　今回は使いません

function draw(atai) {
if (!paintSwitch) return;
	var x = atai.clientX - canvas.offsetLeft;
    var y = atai.clientY - canvas.offsetTop;
    //var can = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}



//---ファイルに書き出すよう

function screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
</form>
<div><img id="newImg"></div>
<!-- このDIVのIDを探してここに画像を入れる -->
</body>
</html>
次に，これをスマートホン版で作ってみます