html, body {
  height: 100%;
  margin: 0;
}
// Create a scene
const scene = new Pencil.Scene(Pencil.default, {
  fill: "#666",
});

// Create a rectangle
const width = 160;
const height = 100;
const rectangle = new Pencil.Rectangle([50, 50], width, height, {
  fill: "blue",
  stroke: "gold", // I stroke gold, aha, get it ?
  opacity: 0.5,
});

// Change rectangle opacity with mouse interaction
rectangle
  .on("hover", () => rectangle.options.opacity = 1)
  .on("leave", () => rectangle.options.opacity = 0.5);

// Make the rectangle draggable and resizable
rectangle.draggable();
rectangle.resizable({
  constrain: new Pencil.Vector([20, 20], [500, 500]),
});

// Add the rectangle to the scene
// Then render the scene every tick
scene.add(rectangle).startLoop();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/pencil.js@0.8.0/dist/pencil.min.js