doFancyRect

**Fancy Rect in JavaScript**
=====================================

A fancy rectangle is a rectangle with rounded corners and a border. Here's an example implementation in JavaScript using HTML5 Canvas:

```javascript
class FancyRect {
  /**
   * Creates a new FancyRect instance.
   * @param {HTMLCanvasElement} canvas - The canvas element to draw on.
   * @param {number} x - The x-coordinate of the rectangle.
   * @param {number} y - The y-coordinate of the rectangle.
   * @param {number} width - The width of the rectangle.
   * @param {number} height - The height of the rectangle.
   * @param {number} cornerRadius - The radius of the rounded corners.
   * @param {string} fillStyle - The fill style of the rectangle.
   * @param {string} strokeStyle - The stroke style of the rectangle.
   */
  constructor(canvas, x, y, width, height, cornerRadius, fillStyle, strokeStyle) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.cornerRadius = cornerRadius;
    this.fillStyle = fillStyle;
    this.strokeStyle = strokeStyle;
  }

  /**
   * Draws the fancy rectangle on the canvas.
   */
  draw() {
    this.ctx.beginPath();
    this.ctx.moveTo(this.x + this.cornerRadius, this.y);
    this.ctx.lineTo(this.x + this.width - this.cornerRadius, this.y);
    this.ctx.quadraticCurveTo(this.x + this.width, this.y, this.x + this.width, this.y + this.cornerRadius);
    this.ctx.lineTo(this.x + this.width, this.y + this.height - this.cornerRadius);
    this.ctx.quadraticCurveTo(this.x + this.width, this.y + this.height, this.x + this.width - this.cornerRadius, this.y + this.height);
    this.ctx.lineTo(this.x + this.cornerRadius, this.y + this.height);
    this.ctx.quadraticCurveTo(this.x, this.y + this.height, this.x, this.y + this.height - this.cornerRadius);
    this.ctx.lineTo(this.x, this.y + this.cornerRadius);
    this.ctx.quadraticCurveTo(this.x, this.y, this.x + this.cornerRadius, this.y);
    this.ctx.closePath();
    this.ctx.fillStyle = this.fillStyle;
    this.ctx.fill();
    this.ctx.strokeStyle = this.strokeStyle;
    this.ctx.stroke();
  }
}

// Example usage:
const canvas = document.getElementById('canvas');
const rect = new FancyRect(canvas, 10, 10, 200, 100, 10, 'red', 'black');
rect.draw();
```

This implementation uses the HTML5 Canvas API to draw a rectangle with rounded corners and a border. The `FancyRect` class takes the following parameters:

* `canvas`: The canvas element to draw on.
* `x` and `y`: The x and y coordinates of the rectangle.
* `width` and `height`: The width and height of the rectangle.
* `cornerRadius`: The radius of the rounded corners.
* `fillStyle` and `strokeStyle`: The fill and stroke styles of the rectangle.

The `draw` method draws the fancy rectangle on the canvas using the `beginPath`, `moveTo`, `lineTo`, `quadraticCurveTo`, and `closePath` methods. The `fill` and `stroke` methods are used to fill and stroke the rectangle, respectively.

You can adjust the parameters to create different types of fancy rectangles.