JSFiddle - React, Tailwind, and code Playground

HTML

<div class="h1">CANNOT INTO ANIMACJE :C</div>
<div class="container">
    <div id="x">
    <!-- delete up -->


<canvas id="canvas"> </canvas>
        <script src="/ajax/js/game.js"></script>


    <!-- delete down -->
    </div>
    <button >UP</button>
    <button >DOWN</button>


</div>

CSS

canvas{
    width: 100%;
    height: 300px;
}
#x {
    width: 500px;
    height: 300px;
    border: 1px red solid;
}

JavaScript

/**
 * Created by mati on 2015-01-18.
 */
    //create canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
    //create image
var image = new Image();
    //parameters
var Cnv = {
    w: canvas.width,
    h: canvas.height,
};
var Hero = {
    h: 50,
    w: 0.2 * canvas.width
};
var Pos = {
    x: Cnv.w / 2 - Hero.w,
    y: Cnv.h - Hero.h,
    destination: 0
};
//0 - in air, 1 - on floor, 2 - upside-down
var status;
//angle/180 -> deegrees
var angle = 0;
//game variables
var lvl = 1;
var score = 0;
var interval = 15 - lvl;

var direction = 0;

//click event handler
$(document).keydown(function (key) {
    'use strict';
    if (status != 0) {        
        if (key.which === 38 && Pos.y === Cnv.h - Hero.h) {            
            Move.up();
            status = 0;
        }
        if (key.which === 40 && Pos.y === 0) {            
            Move.down();
            status = 0;
        }
    }
    else {console.log("Status = 0")}
});
//link to img1
image.src = "http://planlekcji.vv.si/ajax/img/running-icon-on-transparent-background-hi.png";
//and draw this img
image.onload = function () {CreateGame.drawplayer(); }

var CreateGame = {
    drawplayer: function () {
        'use strict';
        
        ctx.clearRect(0, 0, Cnv.w, Cnv.h);
        ctx.save();
        //set (0,0) at center image
        ctx.translate(Pos.x + Hero.w / 2, Pos.y + Hero.h / 2);
        //rotate (x * numbers of steps * PI = 2PI === 180 deegrees
        ctx.rotate(0.01 * angle * Math.PI);
        
        ctx.drawImage(image, -(Hero.w / 2), -(Hero.h / 2), Hero.w, Hero.h);
        
        ctx.restore();                      
        
        if (Pos.y === 0) {
            status = 2;
        }
        if (Pos.y === Cnv.h - Hero.h) {
            status = 1;
        }
    },
    drawbackground: function draw() {

    }
};

//some player logic
var Move = {
    up: function () {
        'use strict';                
        
        direction = 'up';    ...