JSFiddle - React, Tailwind, and code Playground

HTML

<div id="fixed_form">
    <h2>Fixed square :</h2>
    Rotation speed : <input type="number" id="fixed_rotation_speed" value="0"/>
    Angle : <input type="number" id="fixed_angle" value="0"/>
    (Set : <input type="number" id="fixed_set_angle" value="0"/>)
</div>
<div id="cursor_form">
    <h2>Cursor square :</h2>
    Rotation speed : <input type="number" id="cursor_rotation_speed" value="-1"/>
    Angle : <input type="number" id="cursor_angle" value="0"/>
    (Set : <input type="number" id="cursor_set_angle" value="0"/>)
</div>

<canvas id="collide" width="500" height="500"></canvas>

CSS

/* line 1, ../../../scss/frontend/contents/projects-collide.scss */
#collide {
  margin: 50px 100px;
  border: 1px solid black;
}

/* line 6, ../../../scss/frontend/contents/projects-collide.scss */
#fixed_form h2 {
  color: #0033FF;
}

/* line 7, ../../../scss/frontend/contents/projects-collide.scss */
#cursor_form h2 {
  color: #FF8800;
}

/* line 9, ../../../scss/frontend/contents/projects-collide.scss */
#fixed_form input, #cursor_form input {
  margin-left: 25px;
  width: 50px;
}

/* line 13, ../../../scss/frontend/contents/projects-collide.scss */
#fixed_rotation_speed, #cursor_rotation_speed {
  margin-right: 150px;
}

JavaScript

function merge_object(obj1, obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
};
/** 
 * Transforme degrees to radians
 */
Math.radians = function(degrees) {
    return degrees * Math.PI / 180;
};
Math.degrees = function(radians) {
  return radians * 180 / Math.PI;
};

/**
 * Square Javascript File
 *
 * -- Changelog
 * Version 1.0.0 (11/05/2013) AGE
 * - Début du versionnement
 *
 * @package js
 * @author AGE
 * @version 1.0.0
 */

// App Object
var collide = {
    
    // Define
    PROJECT_ID : 'collide',
    PROJECT_SPEED : 50, // FPS : 1000/PROJECT_SPEED
    
    FIXED_SQUARE_SIZE : 100,
    FIXED_SQUARE_X : 250,
    FIXED_SQUARE_Y : 250,
    
    CURSOR_SQUARE_SIZE : 50,
        
    // Attribute
    $el : null,
    $ctx : null,
    project_pos_top : null,
    project_pos_left : null,
    width : null,
    height : null,
    
    cursor_x : 0,
    cursor_y : 0,
    
    fixed_angle : 0,
    fixed_rotaton_speed : null,
    cursor_angle : 0,
    cursor_rotaton_speed : null,
     
    draw_approx : true, 
    fixed_projections : {},
    cursor_projections : {},
        
    /**
     * Init Square Game
     */
    __init : function( options ){
        
        // Get element and informations
        collide.$el = $('#' + collide.PROJECT_ID);
        collide.$ctx = collide.$el[0].getContext('2d');
        
        var offset = collide.$el.offset();
        collide.project_pos_top = offset.top;
        collide.project_pos_left = offset.left;
        collide.width = collide.$el.width();
        collide.height = collide.$el.height();
        
        // Events on Move
        collide.$el.mousemove(function(e){
            // Calculate new position
            collide.cursor_x = e.pageX - collide.project_pos_left;           
            collide.cursor_y = e.pageY - collide.project_pos_top;           
        });
        
       ...