diff --git a/jointjs/testcanvas.html b/jointjs/testcanvas.html
new file mode 100644
index 0000000..ac87039
--- /dev/null
+++ b/jointjs/testcanvas.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<style>
+body { background-color: darkgray; }
+		</style>
+	</head>
+
+	<body>
+		<canvas id='example' width='800' height='300'></canvas>
+	</body>
+
+	<script>
+var canvas = document.getElementById('example');
+var ctx = canvas.getContext('2d');
+
+// master
+ctx.fillStyle = 'rgb(0, 0, 0)';
+ctx.strokeRect(10, 10, 50, 30);
+ctx.fillText('Master', 15, 25);
+	</script>
+</html>
diff --git a/jointjs/testjoint.html b/jointjs/testjoint.html
index dd88d56..d4b0fb6 100644
--- a/jointjs/testjoint.html
+++ b/jointjs/testjoint.html
@@ -4,7 +4,7 @@
 	<link rel='stylesheet' href='joint.min.css'>
 	<style>
 body {
-	background-color: black;
+	background-color: darkgray;
 }
 	</style>
 	</head>
@@ -44,9 +44,8 @@ graph.addCell(develop);
 var link = new joint.shapes.fsa.Arrow({
 	source: { id: master.id },
 	target: { id: develop },
-	attrs: { rect: { fill: 'white' } }
+	attrs: { rect: { stroke: 'white' } }
 });
-link._opt.attrs.stroke = 'white';
 graph.addCell(link);
 
 	</script>
