JSFiddle - React, Tailwind, and code Playground

by travelandchat

HTML

<canvas id="myCanvas" width="500" height="800"></canvas>

JavaScript

(function($) {

  //options:  options.x, options.y, options.width, options.height, options.radius, isStroke, strokeColor,  isFill, fillColor
  $.fn.roundedRect = function(options) {

    if (!options.x || !options.y || !options.width || !options.height) {
      console.log('jQuery RoundedRect Plugin Error: options.x, options.y, options.width, options.height are required!');
      return;
    }
    options.radius = options.radius ? options.radius : 5;
    options.isStroke = options.isStroke ? options.isStroke : true;
    options.strokeColor = options.strokeColor ? options.strokeColor : '#000';

    options.isFill = options.isFill ? options.isFill : false;
    options.fillColor = options.fillColor ? options.fillColor : '#fff';

    const canvasElement = this[0]; //get element from jQuery object
    const context2D = canvasElement.getContext("2d");



    context2D.beginPath();
    context2D.moveTo(options.x + options.radius, options.y); //1
    context2D.lineTo(options.x + options.width - options.radius, options.y); //2
    context2D.quadraticCurveTo(options.x + options.width, options.y, options.x + options.width, options.y + options.radius); //3
    context2D.lineTo(options.x + options.width, options.y + options.height - options.radius); //4
    context2D.quadraticCurveTo(options.x + options.width, options.y + options.height, options.x + options.width - options.radius, options.y + options.height); //5
    context2D.lineTo(options.x + options.radius, options.y + options.height);
    context2D.quadraticCurveTo(options.x, options.y + options.height, options.x, options.y + options.height - options.radius);
    context2D.lineTo(options.x, options.y + options.radius);
    context2D.quadraticCurveTo(options.x, options.y, options.x + options.radius, options.y);
    context2D.closePath();
    if (options.isStroke) {
      context2D.stroke();
    }
    if (options.isFill) {
      context2D.fill();
    }

    return this;

  };

}(jQuery));

$(function() {
 ...