JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div class="pad"></div>
Height:<input class="height_input" value="5px" /><br />
Width:<input class="width_input" value="5px" /><br />
Color:<input class="color_input" value="#000000" /><br />
Border:<input class="border_input" value="none" /><br />
Smooth:<input type="checkbox" class="smooth_input" value="false" /><br />

CSS

.pad {
  position:relative;
  height:600px;
  background-color:#FFFF99;
  overflow:hidden;
}

.line {
  position:absolute;
  background-color:#000000;
}

JavaScript

// drawing pad

mouse_position = function (mode, event, id) {
    'use strict';
    var offset = $(id).offset();
    if (mode === 'top') {
        return event.pageY - offset.top;
    }
    if (mode === 'left') {
        return event.pageX - offset.left;
    }
    return '';
};

$.fn.addbox = function (event) {
  var added_style = '';
  if ($('.smooth_input').prop('checked') === true) {
    added_style = 'border-radius: 50%;';
  }
  
  $(this).append('<div class="line" style="left:' +
                   mouse_position('left', event, this) + 'px;top:' +
                   mouse_position('top', event, this) + 'px;height:' +
                     $('.height_input').val() + ';width:' +
                     $('.width_input').val() + ';background-color:' +
                     $('.color_input').val() + '; border:' +
                     $('.border_input').val() +';' +
                       added_style + '"></div>');
}

$('.pad').on('mousedown', function (event) {
  $(this).addbox(event);
  $(this).on('mousemove', function (event) {
    $(this).addbox(event);
  });
  
  $(this).on('mouseup', function () {
    $(this).off('mousemove');
  });
});