JSFiddle - React, Tailwind, and code Playground

by mihaha

HTML

<canvas id="canvas">Чудо происодит тут!</canvas>
<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcTXXWAVRovO601ddYyBx9LYwVExz3eSLxjDNAsQnHNRQRckpdqSrw" id="logo" style="float: absolute; -webkit-transform: rotate(-5.486863636231797deg) scale(1.0012681602053126); ">
<h1>Orientation Data</h1>
<table>
    <tbody><tr><td>Alpha:</td><td id="alpha">null</td></tr>
      <tr><td>Beta:</td><td id="beta">-0.22826883695629027</td></tr>
      <tr><td>Gamma:</td><td id="gamma">5.486863636231797</td></tr>
      <tr><td>Number of events:</td><td id="nbr">687</td></tr>
    </tbody>
</table>

JavaScript

var example = document.getElementById("canvas");
 var ctx = example.getContext('2d');  // Контекст холста
 var pic = new Image();  // "Создаём" изображение
 pic.src = 'http://habrahabr.ru/i/nocopypast.png'; 
 ctx.drawImage(pic, 0, 0);


var nbrEvents = 0;      
function handler(e) {
        ++nbrEvents;
        document.getElementById('alpha').innerHTML = '' + e.alpha;
        document.getElementById('beta').innerHTML = '' + e.beta;
        document.getElementById('gamma').innerHTML = '' + e.gamma;
        document.getElementById('nbr').innerHTML = nbrEvents;

        var rotate = 'rotate(' + (-e.gamma) + 'deg)';
        var scale = 'scale(' + (1 - e.beta / 180) + ')';
        var logo = document.getElementById('logo');
        logo.style.webkitTransform = rotate + ' ' + scale;
}

 

window.addEventListener('deviceorientation', handler, true)