改良版です 改良箇所はハイライト表示しています．
<!DOCTYPE html>
<html>
<head>
<title>DeviceGravity</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 = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var myX = 0;
var myY = 0;
var grX =0;
var grY =0;
//---スマホのOS取得
var ua = navigator.userAgent;//User Agent（まぁ機種名みたいなの）を取得して変数uaに代入しなさい
//---
//----以下加速度検出用
window.addEventListener("devicemotion", function(evt){//これの反応をみててください，その反応がdevidemotionという種類であればその値をevtに入れなさい
grX = evt.accelerationIncludingGravity.x; // evtのx軸の傾きを出してgrXに入れなさい
grY = evt.accelerationIncludingGravity.y; // evtのx軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8（G)です
//以下iPhoneの時の挙動
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
myX = myX + grX * 2;//myXの値に傾きを足す
myY = myY + grY * -2;//myYの値に傾きをを足す
}
//以下Androidの時の挙動
if (ua.indexOf("Android") >= 0){
myX = myX + grX * -2;//myXの値に傾きを足す
myY = myY + grY * 2;//myYの値に傾きをを足す
}
});
//---------
function draw() {
//--以下真ん中に表示させる用
if(myX < -130){
myX = -130;
}
if(myX > 130){
myX = 130;
}
if(myY < -130){
myY = -130;
}
if(myY > 130){
myY = 130;
}
//----
//ランダム色で塗るrandom color
context.fillStyle = '#'+ Math.floor(Math.random()*16777215).toString(16);//Math.floorはもらった数で小さい方の整数を出す．10.9なら10 -5.9なら-6. Math.randomは０〜１のランダム値を実数で出す．なのでfloat扱い．それにフルカラーの数1677万をかけて，toString(16)で16進数に変更する．個人的にはRGB別々に色を扱っていないので強引なやり方に見えます
context.beginPath();//線を描き始めます
context.arc((myX + 150),(myY + 150),(Math.random()*30),0,Math.PI*2,false);
//context.arc(myX,myY,(Math.random()*10),0,Math.PI*2,false);//円形はmyX,myYの位置から，1〜0の乱数出して，乱数小さいんで10倍して，ラジアンで0度の位置から始めて，Math.PI*2はラジアンで言うところの１＝すなわち360度で描き終えて，描く方向は反時計回りやで
context.fill();//塗りつぶせ
}
setInterval(draw, 10);//10msec起きに描いてね
//---ファイルに書き出すよう
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>
24行目で動作しているデバイスの情報を取得し，35〜44行目でAndoridとiPhone等と別々の挙動をさせています．
（自動選果機の例＝
