JSFiddle - React, Tailwind, and code Playground

HTML

Draw a
    <input name="line-width" type="number" min="1" max="50" size="4"/>
    px width,
    <input name="line-mod" type="number" min="1" max="500" size="4"/> 
    px long and
    <input name="line-color" type="color" size="10" placeholder="pick a color"/>
    line oriented at
    <input name="line-angle" type="number" min="1" max="360" size="4" />°.
    <input type="button" name="draw" value="Just Draw" />    

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

CSS

#playground{
    border: 2px inset black;
}

CoffeeScript

class Drawer
    constructor: (@canvas = $('#playground'), @width_picker = $(':input[name="line-width"]'), @mod_picker   = $(':input[name="line-mod"]'), @color_picker = $(':input[name="line-color"]'), @angle_picker = $(':input[name="line-angle"]'), @line_drawer = $('[type="button"][name="draw"]') ) ->
        @set_default()
        @pen = (@canvas
        .mousedown =>
            @start_drawing()
        .mouseup =>
            @end_drawing()
        )[0].getContext?('2d')
        @width_picker.change =>
            @line_width = @width_picker.val()
        @mod_picker.change =>
            @line_mod   = @mod_picker.val()
        @color_picker.change =>
            @line_color = @color_picker.val()
        @angle_picker.change =>
            @line_angle = @angle_picker.val()
        @line_drawer.click =>
            @draw_line()
        
        
    start_drawing: ->
        @validates()
        @points_to_draw = []
        @canvas.mousemove (e) =>
            @points_to_draw.push
                x: e.pageX
                y: e.pageY
        
    
    end_drawing: ->
        @canvas.unbind 'mousemove'
        @draw @points_to_draw
    
    draw: (points) ->
        @pen.lineWidth   = "#{@line_width}"
        @pen.strokeStyle = "#{@line_color}"
        for point, i in points
            @pen.beginPath()
            @cur_pos =
                x: point.x
                y: point.y
            @pen.moveTo point.x, point.y
            @pen.lineTo points[i+1]?.x, points[i+1]?.y
            @pen.closePath()
            @pen.stroke()

    draw_line: ->
        @validates()
        @draw [@cur_pos, {x: @cur_pos.x + @line_mod * Math.cos(@line_angle * Math.PI / 180), y: @cur_pos.y + @line_mod * Math.sin(@line_angle* Math.PI / 180)}]
    
    validates: ->
        @width_picker.val @line_width = @default_line_width if typeof @line_width isnt 'number' and @line_width % 1 isnt 0
        @mod_picker.val   @line_mod   = @default_line_mod   if typeof @line_mod isnt 'number' and...