2 files changed, 42 insertions, 0 deletions
diff --git a/tests/niminaction/Chapter8/canvas/canvas.nim b/tests/niminaction/Chapter8/canvas/canvas.nim
new file mode 100644
index 000000000..ae2765630
--- /dev/null
+++ b/tests/niminaction/Chapter8/canvas/canvas.nim
@@ -0,0 +1,23 @@
+discard """
+action: compile
+"""
+
+import dom
+
+type
+  CanvasRenderingContext* = ref object
+    fillStyle* {.importc.}: cstring
+    strokeStyle* {.importc.}: cstring
+
+{.push importcpp.}
+
+proc getContext*(canvasElement: Element,
+    contextType: cstring): CanvasRenderingContext
+
+proc fillRect*(context: CanvasRenderingContext, x, y, width, height: int)
+
+proc moveTo*(context: CanvasRenderingContext, x, y: int)
+
+proc lineTo*(context: CanvasRenderingContext, x, y: int)
+
+proc stroke*(context: CanvasRenderingContext)
diff --git a/tests/niminaction/Chapter8/canvas/canvas_test.nim b/tests/niminaction/Chapter8/canvas/canvas_test.nim
new file mode 100644
index 000000000..42d222b7b
--- /dev/null
+++ b/tests/niminaction/Chapter8/canvas/canvas_test.nim
@@ -0,0 +1,19 @@
+import canvas, dom
+
+proc onLoad() {.exportc.} =
+  var canvas = document.getElementById("canvas").EmbedElement
+  canvas.width = window.innerWidth
+  canvas.height = window.innerHeight
+  var ctx = canvas.getContext("2d")
+
+  ctx.fillStyle = "#1d4099"
+  ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
+
+  ctx.strokeStyle = "#ffffff"
+  let letterWidth = 100
+  let letterLeftPos = (window.innerWidth div 2) - (letterWidth div 2)
+  ctx.moveTo(letterLeftPos, 320)
+  ctx.lineTo(letterLeftPos, 110)
+  ctx.lineTo(letterLeftPos + letterWidth, 320)
+  ctx.lineTo(letterLeftPos + letterWidth, 110)
+  ctx.stroke()