JSFiddle - React, Tailwind, and code Playground

HTML

<div id="keys"></div>
<div id="direction"><span>→</span></div>
<canvas id="canvas"></canvas>

CSS

* {
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

body {
  background:#eee;
  font-family:'Verdana', sans-serif;
  margin:0 auto;
  overflow:hidden;
  text-align:center;
}

canvas {
  background:#fff;
  display:block;
}

#keys {
  bottom:0;
  position:absolute;
  height:50px;
  vertical-align:top;
  width:100%;
}
  #keys a {
    border-top:1px solid rgba(0, 0, 0, 0.2);
    border-right:4px solid rgba(0, 0, 0, 0.5);
    border-bottom:4px solid rgba(0, 0, 0, 0.3);
    border-left:2px solid rgba(0, 0, 0, 0.2);
    border-radius:2px;
    color:#fff;
    cursor:pointer;
    display:inline-block;
    font-size:20px;
    height:40px;
    line-height:35px;
    margin-right:10px;
    text-align:center;
    text-shadow:1px 1px 0 #000;
    text-transform:uppercase;
    width:40px;
  }

#direction {
  height:auto;
  position:absolute;
  text-align:center;
  width:100%;
}
  #direction span {
    display:inline-block;
    color:#000;
    font-size:50px;
    text-shadow:0 0 1px #000;
    width:auto;
  }

JavaScript

// Move using "up"
// Change the direction with "right" or "left" arrows
// Change the color with the key or click on the color key
// Activate mouse clicking with the "mouse" option

(function($) {

window.Turtle = new Class({

    Implements : Options,

    options : {
        mouse : false,
        angle : 45,
        color : 'k',
        direction : 270,
        distance : 20,
        directionContainer : 'direction',
        keysContainer : 'keys',
        colors : {
            'c' : 'cyan',
            'm' : 'magenta',
            'y' : 'yellow',
            'k' : 'black',
            'r' : 'red',
            'g' : 'green',
            'b' : 'blue'
        }
    },

    initialize : function(id, options) {
        this.setOptions(options);
        this.canvas = $(id);
        this.context = this.canvas.getContext('2d');
        // Flow
        this.setCanvasSize();
        this.createButtons();
        this.addButtonsEvents();
        this.addKeyboardEvents();
        if (this.options.mouse) this.addMouseEvents();
        this.setColor(this.options.color);
        this.setDirection(this.options.direction);
        this.start();
    },

    setCanvasSize : function() {
        this.canvas.set({
            'width' : window.getSize().x,
            'height' : window.getSize().y
        });
    },

    createButtons : function() {
        Object.each(this.options.colors, function(color, key) {
            new Element('a', {
                'styles' : { 'background-color' : color },
                'data-color' : key,
                'text' : key
            }).inject($(this.options.keysContainer))
        }, this);
    },

    addButtonsEvents : function() {
        $(this.options.keysContainer).addEvent('click:relay(a)', function(event, element) {
            this.setColor(element.get('text'));
        }.bind(this));
    },

    addKeyboardEvents : function() {
        window.addEvent('keyup', function(event) {
            switch(event.key) {

              ...