Added clipping test

test/index.js

@@ -1,26 +1,27 @@
-import {Element} from '../index'
+import { Element } from "../index";
-import arc from './tests/arc'
+import arc from "./tests/arc";
-import arcTo from './tests/arcTo'
+import arcTo from "./tests/arcTo";
-import arcTo2 from './tests/arcTo2'
+import arcTo2 from "./tests/arcTo2";
-import arcToScaled from './tests/arcToScaled'
+import arcToScaled from "./tests/arcToScaled";
-import emptyArc from './tests/emptyArc'
+import emptyArc from "./tests/emptyArc";
-import ellipse from './tests/ellipse'
+import ellipse from "./tests/ellipse";
-import ellipse2 from './tests/ellipse2'
+import ellipse2 from "./tests/ellipse2";
-import fillstyle from './tests/fillstyle'
+import fillstyle from "./tests/fillstyle";
-import globalAlpha from './tests/globalalpha'
+import globalAlpha from "./tests/globalalpha";
-import gradient from './tests/gradient'
+import gradient from "./tests/gradient";
-import linecap from './tests/linecap'
+import linecap from "./tests/linecap";
-import linewidth from './tests/linewidth'
+import linewidth from "./tests/linewidth";
-import scaledLine from './tests/scaledLine'
+import scaledLine from "./tests/scaledLine";
-import rgba from './tests/rgba'
+import rgba from "./tests/rgba";
-import rotate from './tests/rotate'
+import rotate from "./tests/rotate";
-import saveandrestore from './tests/saveandrestore'
+import saveandrestore from "./tests/saveandrestore";
-import setLineDash from './tests/setLineDash'
+import setLineDash from "./tests/setLineDash";
-import text from './tests/text'
+import text from "./tests/text";
-import tiger from './tests/tiger'
+import tiger from "./tests/tiger";
-import transform from './tests/transform'
+import transform from "./tests/transform";
 import pattern from "./tests/pattern";
-import path2D from './tests/path2D';
+import path2D from "./tests/path2D";
+import clip from "./tests/clip";
 
 const tests = [
   tiger,
@@ -28,6 +29,7 @@ const tests = [
   arcTo,
   arcTo2,
   arcToScaled,
+  clip,
   emptyArc,
   ellipse,
   ellipse2,
@@ -44,28 +46,28 @@ const tests = [
   text,
   transform,
   pattern,
-    path2D
+  path2D,
 ];
 
 for (let fn of tests) {
   let name = fn.name;
   // Container
-    const container = document.createElement('div');
+  const container = document.createElement("div");
-    container.className = 'example';
+  container.className = "example";
-    container.id = 'example-' + name;
+  container.id = "example-" + name;
-    container.innerHTML = `<h2>${name}</h2><div class="canvas"></div><div class="svg"></div>`
+  container.innerHTML = `<h2>${name}</h2><div class="canvas"></div><div class="svg"></div>`;
   // Canvas
-    const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
-    container.querySelector('.canvas').appendChild(canvas);
+  container.querySelector(".canvas").appendChild(canvas);
   // SVGCanvas
   const svgcanvas = new Element();
-    container.querySelector('.svg').appendChild(svgcanvas.getElement());
+  container.querySelector(".svg").appendChild(svgcanvas.getElement());
-    document.querySelector('body').appendChild(container);
+  document.querySelector("body").appendChild(container);
   // Render
   for (let c of [canvas, svgcanvas]) {
     c.width = 500;
     c.height = 500;
-        const ctx = c.getContext('2d');
+    const ctx = c.getContext("2d");
     fn(ctx);
   }
 }

test/tests/clip.js

@@ -0,0 +1,38 @@
+export default function clip(ctx) {
+  // Draw a line with clipped areas removed.
+  var scaleX = 1.5,
+    scaleY = 1.2;
+
+  ctx.rotate(Math.PI / 10);
+  ctx.scale(scaleX, scaleY);
+  ctx.translate(200, 25);
+
+  // Draw unclipped line
+  ctx.beginPath();
+  ctx.moveTo(5, 10);
+  ctx.lineTo(195, 200);
+  ctx.stroke();
+
+  ctx.save();
+
+  // Remove clipped areas
+  ctx.beginPath();
+  ctx.rect(20, 30, 30, 10);
+  ctx.rect(0, 0, 300, 300);
+  // ctx.stroke(); // Uncomment for debugging clip.
+  ctx.clip("evenodd");
+
+  // Draw line.
+  ctx.beginPath();
+  ctx.moveTo(10, 10);
+  ctx.lineTo(200, 200);
+  ctx.stroke();
+
+  ctx.restore();
+
+  // Draw unclipped line
+  ctx.beginPath();
+  ctx.moveTo(15, 10);
+  ctx.lineTo(205, 200);
+  ctx.stroke();
+}

test/tests/path2D.js

@@ -7,13 +7,17 @@ function makePath(ctx, arg) {
 }
 
 export default function path2D(ctx) {
-    const path1 = makePath(ctx, `M 230 80
+  const path1 = makePath(
+    ctx,
+    `M 230 80
         A 45 45, 0, 1, 0, 275 125
-        L 275 80 Z`);
+        L 275 80 Z`
+  );
 
-    ctx.strokeStyle = 'red';
+  ctx.save();
+  ctx.strokeStyle = "red";
   ctx.stroke(path1);
-    ctx.fillStyle = 'grey';
+  ctx.fillStyle = "grey";
   ctx.fill(path1);
 
   ctx.translate(10, 25);
@@ -24,6 +28,21 @@ export default function path2D(ctx) {
   ctx.scale(1.5, 1.5);
   ctx.translate(10, 25);
 
-    ctx.strokeStyle = 'blue';
+  ctx.strokeStyle = "blue";
   ctx.stroke(path1);
- };
+  ctx.restore();
+
+  ctx.save();
+  // Stroke and fill the same path.
+  ctx.beginPath();
+  ctx.rect(10, 10, 40, 20);
+  ctx.save();
+  ctx.strokeStyle = "red";
+  ctx.stroke();
+  ctx.restore();
+  ctx.save();
+  ctx.fillStyle = "green";
+  ctx.fill();
+  ctx.restore();
+  ctx.restore();
+}