This time with HTML5′s <canvas> tag, jquery-1.7.2 and coffeescript-1.3.1.
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>CoffeeCanvasScribble</title>
<script src="js/jquery-1.7.2.js"></script>
<script src="js/coffee-script.js"></script>
<link rel="stylesheet" href="css/cs_scribble.css" />
</head>
<body>
<canvas id="canvas" width="800" height="500"
style="width: 800px; height: 500px; border: 1px solid gray"></canvas>
<div id="buttons">
<div> </div>
<input type="button" id="clear" value="Clear" />
<input type="button" id="red" value="Red" />
<input type="button" id="green" value="Green" />
<input type="button" id="blue" value="Blue" />
<input type="button" id="black" value="Black" />
<input type="button" id="snapshot" value="Snapshot" />
<div> </div>
<div class="filler"></div>
</div>
<div id="snapshotDiv"> </div>
<script type="text/coffeescript">
canvas = $('#canvas')
offset = canvas.offset()
# this is the 'real/non-jquery' document.getElementByID:
canvasDoc = canvas[0]
context = canvasDoc.getContext '2d'
#
# canvas handling
#
button = null
# useful for debugging...
#
# usage: console.log dump(o)
# dump = (obj) ->
# str = ""
# for own key, value of obj
# str += "#{key} = #{obj[key]}\n"
# str
$('#canvas').mousedown (e) ->
button = e.button
x = e.pageX
y = e.pageY
x -= offset.left
y -= offset.top
context.beginPath()
context.moveTo x, y
$('#canvas').mouseup (e) ->
button = null
context.closePath()
$('#canvas').mousemove (e) ->
return unless (button?)
x = e.pageX
y = e.pageY
x -= offset.left
y -= offset.top
context.lineTo x, y
context.stroke()
#
# HTML button handling
#
# usage: logToMessage "((#{x}, #{y}))"
#
# needs <div id="message"> </div> somewhere
#
# logToMessage = (message) ->
# $('#message').show().html message
$('#red').mousedown (e) ->
context.strokeStyle = 'red'
$('#green').mousedown (e) ->
context.strokeStyle = 'green'
$('#blue').mousedown (e) ->
context.strokeStyle = 'blue'
$('#black').mousedown (e) ->
context.strokeStyle = 'black'
$('#snapshot').mousedown (e) ->
img = canvasDoc.toDataURL()
$('#snapshotDiv').show().html "<img id='snapshotImg' src='#{img}'/>"
$('#clear').mousedown (e) ->
context.save()
# Use the identity matrix while clearing the canvas
context.setTransform 1, 0, 0, 1, 0, 0
context.clearRect 0, 0, context.canvas.width, context.canvas.height
# restore transform matrix
context.restore()
# clear any snapshot
$('#snapshotDiv').show().html ' '
</script>
</body>
</html>
And the ‘beautiful’ results, as shown in IE9:
It’s actually slightly more beautiful in Safari, but one screenshot is quite enough.
Note the use of the data: URL.
I guess that this doesn’t really show the power of coffeescript but it was fun to make, and adds another Scribble implementation to the Java, Groovy, JavaFX and JRuby versions already here.
