<script src="https://unpkg.com/roughjs@latest/bundled/rough.js"></script>
<body>
<h2>All Wired-elements was built using RoughJS and Lit. <a href="https://wiredjs.com/showcase.html"/>on this webpage</a>.</h2>
<h2>See simple excamples with RoughJS : <a href="https://roughjs.com/"/>on the official webpage</a>.</h2>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script></script>
</body>
// clear the canvas for redrawing
const context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);

// draw a rectangle
const rc = rough.canvas(canvas);
rc.rectangle(20, 20, 200, 100); // x, y, width, height

// show the drawing
canvas.style.display = "block";

rc.rectangle(20, 20, 100, 50);
rc.rectangle(140, 20, 100, 50, { fill: "red" });

rc.ellipse(70, 50, 100, 60);
rc.ellipse(190, 50, 100, 60, { fill: "blue", stroke: "red" });

// upper left segment
rc.arc(70, 60, 100, 80, Math.PI, Math.PI * 1.6, true);

// lower right segment
rc.arc(70, 60, 100, 80, 0, Math.PI / 2, true, {
    stroke: "red",
    strokeWidth: 4,
    fill: "rgba(255,255,0,0.4)",
    fillStyle: "solid",
});

// lower left segment
rc.arc(70, 60, 100, 80, Math.PI / 2, Math.PI, true, {
    stroke: "blue",
    strokeWidth: 2,
    fill: "rgba(255,0,255,0.4)",
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.