Skip to content

Instantly share code, notes, and snippets.

@Nek

Nek/painter.html

Created August 1, 2012 06:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Nek/3224296 to your computer and use it in GitHub Desktop.
Save Nek/3224296 to your computer and use it in GitHub Desktop.
Download ZIP
Simple canvas painting using flapjax.
Raw
painter.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="http://www.flapjax-lang.org/download/flapjax-2.1.js"></script>
<script type="text/javascript">
function loader() {
aCanvas = document.getElementById("canv");
mouseMovesAndOversE = mergeE(changes(mouseB(aCanvas)), $E(aCanvas,"mouseover"));
strokesE = collectE(skipFirstE(mouseMovesAndOversE) ,[mouseMovesAndOversE],
function (n, arr) {
arr.push(n);
if (arr.length > 2) arr.shift();
return arr;
})
.filterE(function(ev){
return !(ev[0].type == "mouseover" || ev[1].type == "mouseover")
})
mouseIsDownE = $E(aCanvas, "mousedown").mergeE($E(aCanvas, "mouseup")).mapE(function(e) {
return e.type == "mousedown" ? true : false;
});
mouseIsDownB = startsWith(mouseIsDownE, false);
ifB(mouseIsDownB, strokesE.startsWith([]),constantB([])).changes().mapE(drawStroke);
aContext = aCanvas.getContext("2d");
function drawStroke(strokes) {
aContext.beginPath();
aContext.moveTo(strokes[0].left, strokes[0].top);
aContext.lineTo(strokes[1].left, strokes[1].top);
aContext.strokeStyle = "#000";
aContext.stroke();
}
}
</script>
</head>
<body onload="loader();">
<canvas id="canv" style="cursor: pointer;" width="300" height="300"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment