+ <canvas id="canvas" class="dotmark ov" width="${bg_dim%x*}" height="${bg_dim#*x}"></canvas>
+
+ <input type=hidden id=image_serialize name=imagedata value="">
+ <span id="jsdebug" style="display: none; position: fixed; right:0; bottom:0">Debug</span>
+
+ <script><!--
+ body = document.body
+ canvas = document.getElementById("canvas")
+ dbg = document.getElementById("jsdebug")
+ image = canvas.getContext("2d")
+ mouse = 0
+ image_serialize=""
+ data=document.getElementById("image_serialize")
+
+ function setcol(c) {
+ image.fillStyle = c
+ image_serialize += " fill " + c
+ }
+
+ setcol("$tpy[color]")
+
+ function circle(x, y) {
+ sx=Math.floor(cscaleW * (x - canvas.offsetLeft + body.scrollLeft))
+ sy=Math.floor(cscaleH * (y - canvas.offsetTop + body.scrollTop))
+
+ image.beginPath()
+ image.arc( sx, sy, 5, 0, 2 * Math.PI )
+ image.fill()
+ image.closePath()
+
+ image_serialize += " circle " + sx + "," + sy + " " + (sx-5) + "," + sy
+ }
+
+ window.addEventListener( 'mouseup', function() { mouse = 0
+ dbg.innerHTML = image_serialize
+ data.value = image_serialize
+ } )
+ canvas.addEventListener( 'mousedown', function(e) {
+ mouse = 1
+
+ cscaleW = canvas.width / canvas.clientWidth
+ cscaleH = canvas.height / canvas.clientHeight
+
+ circle(e.clientX, e.clientY)
+ } )
+ canvas.addEventListener( 'mousemove', function(e) {
+ if ( mouse == 1 ) { circle(e.clientX, e.clientY) }
+ } )
+ --></script>