1 files changed, 56 insertions, 0 deletions
diff --git a/Base/res/html/misc/canvas-path-quadratic-curve.html b/Base/res/html/misc/canvas-path-quadratic-curve.html
new file mode 100644
index 0000000000..0985f97184
--- /dev/null
+++ b/Base/res/html/misc/canvas-path-quadratic-curve.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>canvas path - quadratic curve example</title>
+</head>
+<body>
+<canvas width=500 height=500></canvas>
+<script>
+
+function drawSomeCurves() {
+
+var canvas = document.querySelector("canvas");
+var ctx = canvas.getContext("2d");
+var x = 150;
+var y = 150;
+
+canvas.addEventListener("mousedown", function(e) {
+    x = e.offsetX;
+    y = e.offsetY;
+});
+
+canvas.addEventListener("mousemove", function(e) {
+    ctx.beginPath();
+    ctx.fillStyle = 'white';
+    ctx.fillRect(0, 0, 500, 500);
+
+    ctx.strokeStyle = 'red';
+
+    ctx.lineWidth = 1;
+
+    ctx.fillRect(0, 0, 500, 500);
+
+    ctx.moveTo(0, 0);
+    ctx.quadraticCurveTo(e.offsetX, e.offsetY, x, y);
+    ctx.stroke();
+
+    ctx.moveTo(30, 90);
+    ctx.lineTo(110, 20);
+    ctx.lineTo(240, 130);
+    ctx.lineTo(60, 130);
+    ctx.lineTo(190, 20);
+    ctx.lineTo(270, 90);
+    ctx.closePath();
+
+    // Fill path
+    ctx.fillStyle = 'green';
+    ctx.fill('evenodd');
+});
+
+}
+
+drawSomeCurves();
+
+</script>
+</body>
+</html>