加速度センサを使って抽象画というかミニマルアートっぽいのを描きます
<!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");
//---------以下加速度検出用
window.addEventListener("devicemotion", function(evt){//これの反応をみててください，その反応がdevidemotionという種類であればその値をevtに入れなさい
var grX = evt.accelerationIncludingGravity.x; // evtのx軸の傾きを出してgrXに入れなさい
var grY = evt.accelerationIncludingGravity.y; // evtのx軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8（G)です
var myX = 0;
var myY = 0;
myX = myX + grX;//myXの値に傾きを足す
myY = myY + grY;//myYの値に傾きをを足す(iPhoneならここに-1をかけ算する）
});
//---------
function draw() {
if(myX < 0){
myX = 0;
}
if(myX > 320){
myX = 320;
}
if(myY < 0){
myY = 0;
}
if(myY > 320){
myY = 320;
}
//ランダム色で塗る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,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毎に描いてね
</script>
<div id="screen"></div>
</body>
</html>
2カ所間違えているのでこのままでは動作しません．グローバル変数とローカル変数に気をつけて，どこが間違っているのかよく探してみましょう．
誤りを見つけて修正してみてください．