First you'll have to do some bindings for canvas API. Currently there are none as far as I'm concerned.
import dom
type
Canvas* = ref CanvasObj
CanvasObj {.importc.} = object of dom.Element
CanvasContext2d* = ref CanvasContext2dObj
CanvasContext2dObj {.importc.} = object
font*: cstring
proc getContext2d*(c: Canvas): CanvasContext2d =
{.emit: "`result` = `c`.getContext('2d');".}
proc beginPath*(c: CanvasContext2d) {.importcpp.}
proc stroke*(c: CanvasContext2d) {.importcpp.}
proc strokeText*(c: CanvasContext2d, txt: cstring, x, y: float) {.importcpp.}
# etc.
dom.window.onload = proc (e: dom.Event) =
let c = dom.document.getElementById("MyCanvas").Canvas
let ctx = c.getContext2d()
ctx.font = "30px Arial"
ctx.strokeText("Hello World",10,50)
Well you get the point.
I compiled the nim program above to javascript but how do I make it run in the HTML file ?
<html><body>
<script type="text/javascript" src="writetocanvas.js"></script>
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid #000000;">
</body></html>
What connection do you mean? There is no connection after the page has loaded.
As for the keyboard:
proc onkeyup(evt: dom.Event) =
echo "keyup"
proc onkeydown(evt: dom.Event) =
echo "keydown"
document.addEventListener("keydown", onkeydown, false)
document.addEventListener("keyup", onkeyup, false)