diff --git a/src/Library/demos/Drawing Area/main.blp b/src/Library/demos/Drawing Area/main.blp
new file mode 100644
index 000000000..4d6fb361a
--- /dev/null
+++ b/src/Library/demos/Drawing Area/main.blp	
@@ -0,0 +1,29 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Drawing Area";
+  description: _("Programmatically draw onto a surface.");
+
+ Box {
+    halign: center;
+    orientation: vertical;
+
+    DrawingArea drawing_area {
+      content-width: 300;
+      content-height: 300;
+    }
+
+    Scale scale {
+      orientation: horizontal;
+      width-request: 300;
+      draw-value: true;
+      adjustment: Gtk.Adjustment {
+        lower: -25;
+        upper: 25;
+        value: 0;
+      };
+    }
+  }
+}
+//https://docs.gtk.org/gtk4/class.DrawingArea.html
diff --git a/src/Library/demos/Drawing Area/main.js b/src/Library/demos/Drawing Area/main.js
new file mode 100644
index 000000000..ecbf1ece4
--- /dev/null
+++ b/src/Library/demos/Drawing Area/main.js	
@@ -0,0 +1,85 @@
+import Cairo from "cairo";
+import Gtk from "gi://Gtk?version=4.0";
+Gtk.init();
+
+const drawingArea = workbench.builder.get_object("drawing_area");
+const scaleRotate = workbench.builder.get_object("scale");
+
+let triangle   = [3];
+triangle[0]    = [2];
+triangle[0][0] = 100;
+triangle[0][1] = 100;
+triangle[1]    = [2];
+triangle[1][0] = 0;
+triangle[1][1] = -100;
+triangle[2]    = [2];
+triangle[2][0] = -100;
+triangle[2][1] =  100;
+let triangle_original = [3];
+for (let i = 0; i < 3; i++) {
+  let temp = [2];
+  temp[0] = triangle[i][0];
+  temp[1] = triangle[i][1];
+  triangle_original[i] = temp;
+}
+
+drawingArea.set_draw_func((area, cr, width, height) => {
+  // Draw triangle in context
+  cr.moveTo(150 + triangle[0][0], 150 + triangle[0][1]);
+  cr.lineTo(150 + triangle[1][0], 150 + triangle[1][1]);
+  cr.lineTo(150 + triangle[2][0], 150 + triangle[2][1]);
+  cr.lineTo(150 + triangle[0][0], 150 + triangle[0][1]);
+
+  cr.setSourceRGBA(1, 0, 1, 1);
+  cr.stroke();
+  // Freeing the context before returning from the callback
+  cr.$dispose();
+});
+
+scaleRotate.connect("value-changed", () => {
+  // Recalculate value of points of triangle
+  for (let i = 0; i < 3; i++) {
+    // Calculate original angle
+    let x = triangle_original[i][0];
+    let y = triangle_original[i][1];
+    let angle = Math.atan(Math.abs(y) / Math.abs(x));
+    if (x > 0 && y > 0) {
+      angle = angle;
+    }
+    if (x < 0 && y > 0) {
+      angle = Math.PI - angle;
+    }
+    if (x < 0 && y < 0) {
+      angle = Math.PI + angle;
+    }
+    if (x > 0 && y < 0) {
+      angle = Math.PI * 2 - angle;
+    }
+    if (x === 0) {
+      if (y > 0) {
+        angle = angle;
+      }
+      if (y < 0) {
+        angle = -1 * angle;
+      }
+    }
+    if (y === 0) {
+      if (x > 0) {
+        angle = angle;
+      }
+      if (x < 0) {
+        angle = M_PI;
+      }
+    }
+    // Add to original angle scale value
+    angle += (scaleRotate.get_value() * Math.PI) / 180;
+    // Set new value to triangle
+    let radius = Math.sqrt(x * x + y * y);
+
+    triangle[i][0] = radius * Math.cos(angle);
+    triangle[i][1] = radius * Math.sin(angle);
+  }
+  // Redraw drawing_area
+  drawingArea.queue_draw();
+});
+//https://www.cairographics.org/tutorial/
diff --git a/src/Library/demos/Drawing Area/main.json b/src/Library/demos/Drawing Area/main.json
new file mode 100644
index 000000000..fda5be0e1
--- /dev/null
+++ b/src/Library/demos/Drawing Area/main.json	
@@ -0,0 +1,10 @@
+{
+  "name": "Drawing Area",
+  "category": "user_interface",
+  "description": "Programmatically draw onto a surface.",
+  "panels": [
+    "ui",
+    "code"
+  ],
+  "autorun": true
+}