<!doctype html>
<html lang="fr">
<head>
<meta charset="utf_8">
<title>Game</title>
<style>
html,body{
height:100%;
margin:0;
}
body{
overflow:hidden;
background:royalblue;
}
svg{
width:100%;
height:100%;
}
#display{
font-family:sans-serif;
font-size:10px;
color:#fff;
position:absolute;
top:0;
left:0;
z-index:-1;
}
</style>
<body>
<svg>
<image x="0" y="0" width="100" height="100" transform="rotate(0 0 0)" xlink:href="" id="i1"/>
</svg>
<div id="display"></div>
<script>
var ww=window.innerWidth;
var wh=window.innerHeight;
var display=document.getElementById("display");
var mx,my;
document.body.onmousemove=function(e){
mx=e.clientX;
my=e.clientY;
var adeg=Math.round(Math.atan2(my-(wh/2),mx-(wh/2))*180/Math.PI);
display.innerHTML="mouse x: "+mx+"<br>mouse y: "+my+"<br>angle: "+adeg;
}
</script>
</body>
</head>
