experimental/Intersection/bc.htm - platform/external/skqp - Gitiles

 <!-- bezier clip visualizer -->
 <html>
 <head>
 <div style="height:0">

 <div id="clip1">
 (gdb) p smaller
 $2 = {{
     x = 0.91292418204644155,
     y = 0.41931201426549197
   }, {
     x = 0.70491388044579517,
     y = 0.64754305977710236
   }, {
     x = 0,
     y = 1
   }}
 (gdb) p larger
 $3 = {{
     x = 0.21875,
     y = 0.765625
   }, {
     x = 0.125,
     y = 0.875
   }, {
     x = 0,
     y = 1
   }}
 (gdb) p distance2y
 $1 = {{
     x = 0,
     y = 0.080355482722450078
   }, {
     x = 0.5,
     y = 0.038383741101172597
   }, {
     x = 1,
     y = 0
   }}
 </div>

 <div id="quad21a">
 bezier_clip q1=(0,0 1,0 0,2) q2=(0.5,0.25 0.5,0.5 0,1) minT=0 maxT=1
 </div>
 <div id="quad21b">
 bezier_clip q1=(0.5,0.25 0.5,0.375 0.375,0.5625) q2=(0,0 1,0 0,2) minT=0.3 maxT=0.78125
 </div>
 <div id="quad21c">
 bezier_clip q1=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) q2=(0.5,0.25 0.5,0.375 0.375,0.5625) minT=0 maxT=0.926710098
 </div>
 <div id="quad21d">
 bezier_clip q1=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) q2=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) minT=0.187231244 maxT=0.729263299
 </div>
 <div id="quad21e">
 bezier_clip q1=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) q2=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) minT=0 maxT=1
 </div>
 <div id="quad21f">
 bezier_clip q1=(0.493290691,0.311274036 0.486581381,0.343588381 0.473162762,0.379257381) q2=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) minT=0.0828748517 maxT=0.150086861
 </div>

 <div id="quad21g">
 (gdb) p smaller
 $1 = {{
     x = 0.48441440743366754,
     y = 0.33903196011243797
   }, {
     x = 0.48750982503868118,
     y = 0.35346899178071778
   }, {
     x = 0.48999046908865357,
     y = 0.368520797004039
   }}
 (gdb) p larger
 $2 = {{
     x = 0.49329069058425024,
     y = 0.31127403581536672
   }, {
     x = 0.48658138116850047,
     y = 0.34358838107698753
   }, {
     x = 0.47316276233700094,
     y = 0.37925738104648321
   }}
 </div>

 <div id="quad36">
 (gdb) p fQ
 $2 = {{
     x = 1.8883839294261275,
     y = 2.1108590606904345
   }, {
     x = 1.888463903363252,
     y = 2.1111576060205435
   }, {
     x = 1.8885438199983176,
     y = 2.1114561800016824
   }}
 (gdb) p rh.fQ
 $3 = {{
     x = 1.8883839294260976,
     y = 2.1108590606903377
   }, {
     x = 1.8886366953645748,
     y = 2.1109850143489544
   }, {
     x = 1.8888888888888888,
     y = 2.1111111111111112
   }}
 (gdb)
 </div>

 <div id="quad37">
  {{x = 360.048828125, y = 229.2578125}, {x = 360.048828125, y = 224.4140625}, {x = 362.607421875, y = 221.3671875}}
  {{x = 362.607421875, y = 221.3671875}, {x = 365.166015625, y = 218.3203125}, {x = 369.228515625, y = 218.3203125}}
 </div>

 <div id="quad38">
 $2 = {{fX = 369.969421, fY = 137.94809}, {fX = 383.982849, fY = 121.260353}, {fX = 406.233154, fY = 121.260353}}
 $4 = {{fX = 406.232788, fY = 121.260353}, {fX = 409.441956, fY = 121.260353}, {fX = 412.972046, fY = 121.795212}}
 </div>

 <div id="quad39">
 {{x = 406.233154296875, y = 121.26035308837891}, {x = 406.23153587045397, y = 121.26035308837891}, {x = 406.22991748761177, y = 121.26035317666889}},
 {{x = 406.23295158013377, y = 121.26035308872596}, {x = 406.2328698329315, y = 121.26035308837889}, {x = 406.2327880859375, y = 121.26035308837891}},
 </div>

 </div>

 <script type="text/javascript">

 var testDivs = [
     quad39,
     quad38,
     quad37,
     quad36,
     quad21g,
     quad21a,
     quad21b,
     quad21c,
     quad21d,
     quad21e,
     quad21f,
     clip1,
 ];

 var scale, columns, rows, xStart, yStart;

 var ticks = 10;
 var at_x = 13 + 0.5;
 var at_y = 13 + 0.5;
 var init_decimal_places = 1; // make this 3 to show more precision
 var decimal_places;
 var tests = [];
 var testTitles = [];
 var testIndex = 0;
 var ctx;
 var fat1 = true;
 var fat2 = false;
 var ctl1 = true;
 var ctl2 = false;
 var ctlPts1 = true;
 var ctlPts2 = false;
 var minScale = 1;
 var subscale = 1;

 function parse(test, title) {
     var curveStrs = test.split("{{");
     if (curveStrs.length == 1)
         curveStrs = test.split("=(");
     var pattern = /[a-z$=]?-?\d+\.*\d*/g;
     var curves = [];
     for (var c in curveStrs) {
         var curveStr = curveStrs[c];
         var points = curveStr.match(pattern);
         var pts = [];
         for (var wd in points) {
             var num = parseFloat(points[wd]);
             if (isNaN(num)) continue;
             pts.push(num);
         }
         if (pts.length > 0)
             curves.push(pts);
     }
     if (curves.length >= 2) {
         tests.push(curves);
         testTitles.push(title);
     }
 }

 function init(test) {
     var canvas = document.getElementById('canvas');
     if (!canvas.getContext) return;
     canvas.width = window.innerWidth - at_x;
     canvas.height = window.innerHeight - at_y;
     ctx = canvas.getContext('2d');
     var xmin = Infinity;
     var xmax = -Infinity;
     var ymin = Infinity;
     var ymax = -Infinity;
     for (var curves in test) {
         var curve = test[curves];
         var last = curve.length;
         for (var idx = 0; idx < last; idx += 2) {
             xmin = Math.min(xmin, curve[idx]);
             xmax = Math.max(xmax, curve[idx]);
             ymin = Math.min(ymin, curve[idx + 1]);
             ymax = Math.max(ymax, curve[idx + 1]);
         }
     }
     subscale = 1;
     decimal_places = init_decimal_places;
     if (xmax != xmin && ymax != ymin) {
         while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
             subscale *= 10;
             decimal_places += 1;
      //       if (subscale > 100000) {
      //           break;
      //       }
         }
     }
     columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1;
     rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1;

     xStart = Math.floor(xmin * subscale) / subscale;
     yStart = Math.floor(ymin * subscale) / subscale;
     var hscale = ctx.canvas.width / columns / ticks;
     var vscale = ctx.canvas.height / rows / ticks;
     minScale = Math.floor(Math.min(hscale, vscale));
     scale = minScale * subscale;
  //   while (columns < 1000 && rows < 1000) {
   //      columns *= 2;
  //       rows *= 2;
  //   }
 }

 function drawPoint(px, py, xoffset, yoffset, unit) {
     var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
     var _px = px * unit + xoffset;
     var _py = py * unit + yoffset;
     ctx.beginPath();
     ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
     ctx.closePath();
     ctx.fill();
     ctx.fillText(label, _px + 5, _py);
 }

 function draw(test, title, _at_x, _at_y, scale) {
     ctx.fillStyle = "rgba(0,0,0, 0.1)";
     ctx.font = "normal 50px Arial";
     ctx.fillText(title, 50, 50);
     ctx.font = "normal 10px Arial";

     var unit = scale * ticks;
     ctx.lineWidth = 1;
     var i;
     for (i = 0; i <= rows * ticks; ++i) {
         ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
         ctx.beginPath();
         ctx.moveTo(_at_x + 0, _at_y + i * minScale);
         ctx.lineTo(_at_x + unit * columns, _at_y + i * minScale);
         ctx.stroke();
     }
     for (i = 0; i <= columns * ticks; ++i) {
         ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
         ctx.beginPath();
         ctx.moveTo(_at_x + i * minScale, _at_y + 0);
         ctx.lineTo(_at_x + i * minScale, _at_y + unit * rows);
         ctx.stroke();
     }

     var xoffset = xStart * -unit + _at_x;
     var yoffset = yStart * -unit + _at_y;

     ctx.fillStyle = "rgb(40,80,60)"
     for (i = 0; i <= columns; i += (1 / ticks))
     {
         num = xStart + i / subscale;
         ctx.fillText(num.toFixed(decimal_places), xoffset + num * unit - 5, 10);
     }
     for (i = 0; i <= rows; i += (1 / ticks))
     {
         num = yStart + i / subscale;
         ctx.fillText(num.toFixed(decimal_places), 0, yoffset + num * unit + 0);
     }

     // draw curve 1 and 2
     var curves, pts;
     for (curves in test) {
         var curve = test[curves];
         ctx.beginPath();
         ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
         switch (curve.length) {
             case 6:
                 ctx.quadraticCurveTo(
                     xoffset + curve[2] * unit, yoffset + curve[3] * unit,
                     xoffset + curve[4] * unit, yoffset + curve[5] * unit);
                 break;
             case 8:
                 ctx.bezierCurveTo(
                     xoffset + curve[2] * unit, yoffset + curve[3] * unit,
                     xoffset + curve[4] * unit, yoffset + curve[5] * unit,
                     xoffset + curve[6] * unit, yoffset + curve[7] * unit);
                 break;
         }
         if (curves == 2) ctx.strokeStyle = curves ? "red" : "blue";
         ctx.stroke();
         ctx.strokeStyle = "rgba(0,0,0, 0.3)";
         ctx.beginPath();
         ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
         ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
         ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
         if (curve.length == 8)
             ctx.lineTo(xoffset + curve[6] * unit, yoffset + curve[7] * unit);
         ctx.stroke();
     }
     // optionally draw fat lines for curve
     if (fat1)
         drawFat(test[0], xoffset, yoffset, unit);
     if (fat2)
         drawFat(test[1], xoffset, yoffset, unit);
     if (ctl1)
         drawCtl(test[0], xoffset, yoffset, unit);
     if (ctl2)
         drawCtl(test[1], xoffset, yoffset, unit);
     if (ctlPts1)
         drawCtlPts(test[0], xoffset, yoffset, unit);
     if (ctlPts2)
         drawCtlPts(test[1], xoffset, yoffset, unit);
 }

 function drawCtl(curve, xoffset, yoffset, unit) {
     var last = curve.length - 2;
     ctx.strokeStyle = "rgba(0,0,0, 0.5)";
     ctx.beginPath();
     ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
     ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
     ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
     ctx.stroke();
 }

 function drawCtlPts(curve, xoffset, yoffset, unit) {
     drawPoint(curve[0], curve[1], xoffset, yoffset, unit);
     drawPoint(curve[2], curve[3], xoffset, yoffset, unit);
     drawPoint(curve[4], curve[5], xoffset, yoffset, unit);
 }

 function drawFat(curve, xoffset, yoffset, unit) {
     var last = curve.length - 2;
     ctx.strokeStyle = "rgba(0,0,0, 0.5)";
     ctx.beginPath();
     ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
     ctx.lineTo(xoffset + curve[last] * unit, yoffset + curve[last + 1] * unit);
     ctx.stroke();
     // draw line parallel to end points through control points
     var dx = curve[last] - curve[0];
     var dy = curve[last + 1] - curve[1];
     drawParallelLine(curve[2], curve[3], dx, dy, xoffset, yoffset, unit);
     if (curve.length == 8)
         drawParallelLine(curve[4], curve[5], dx, dy, xoffset, yoffset, unit);
 }

 function drawParallelLine(x, y, dx, dy, xoffset, yoffset, unit) {
     var x1 = x - dx;
     var y1 = y - dy;
     var x2 = x + dx;
     var y2 = y + dy;
     ctx.beginPath();
     ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit);
     ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit);
     ctx.stroke();
 }

 function drawTop() {
     init(tests[testIndex]);
     redraw();
 }

 function redraw() {
     ctx.beginPath();
     ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
     ctx.fillStyle="white";
     ctx.fill();
     draw(tests[testIndex], testTitles[testIndex], at_x, at_y, scale);
 }

 function doKeyPress(evt) {
     var char = String.fromCharCode(evt.charCode);
     switch (char) {
     case 'c':
         ctl2 ^= true;
         if (ctl2 == false)
             ctl1 ^= true;
         drawTop();
         break;
     case 'd':
         ctlPts2 ^= true;
         if (ctlPts2 == false)
             ctlPts1 ^= true;
         drawTop();
         break;
     case 'f':
         fat2 ^= true;
         if (fat2 == false)
             fat1 ^= true;
         drawTop();
         break;
     case 'N':
         testIndex += 9;
     case 'n':
         if (++testIndex >= tests.length)
             testIndex = 0;
         mouseX = Infinity;
         drawTop();
         break;
     case 'P':
         testIndex -= 9;
     case 'p':
         if (--testIndex < 0)
             testIndex = tests.length - 1;
         mouseX = Infinity;
         drawTop();
         break;
     }
 }

 function handleMouseClick() {
 }

 function handleMouseOver() {
 }

 function start() {
     for (i = 0; i < testDivs.length; ++i) {
         var title = testDivs[i].id.toString();
         var str = testDivs[i].firstChild.data;
         parse(str, title);
     }
     drawTop();
     window.addEventListener('keypress', doKeyPress, true);
     window.onresize = function() {
         drawTop();
     }
 }

 </script>
 </head>

 <body onLoad="start();">
 <canvas id="canvas" width="750" height="500"
     onmousemove="handleMouseOver()"
     onclick="handleMouseClick()"
     ></canvas >
 </body>
 </html>
	<!-- bezier clip visualizer -->
	<html>
	<head>
	<div style="height:0">

	<div id="clip1">
	(gdb) p smaller
	$2 = {{
	x = 0.91292418204644155,
	y = 0.41931201426549197
	}, {
	x = 0.70491388044579517,
	y = 0.64754305977710236
	}, {
	x = 0,
	y = 1
	}}
	(gdb) p larger
	$3 = {{
	x = 0.21875,
	y = 0.765625
	}, {
	x = 0.125,
	y = 0.875
	}, {
	x = 0,
	y = 1
	}}
	(gdb) p distance2y
	$1 = {{
	x = 0,
	y = 0.080355482722450078
	}, {
	x = 0.5,
	y = 0.038383741101172597
	}, {
	x = 1,
	y = 0
	}}
	</div>

	<div id="quad21a">
	bezier_clip q1=(0,0 1,0 0,2) q2=(0.5,0.25 0.5,0.5 0,1) minT=0 maxT=1
	</div>
	<div id="quad21b">
	bezier_clip q1=(0.5,0.25 0.5,0.375 0.375,0.5625) q2=(0,0 1,0 0,2) minT=0.3 maxT=0.78125
	</div>
	<div id="quad21c">
	bezier_clip q1=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) q2=(0.5,0.25 0.5,0.375 0.375,0.5625) minT=0 maxT=0.926710098
	</div>
	<div id="quad21d">
	bezier_clip q1=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) q2=(0.42,0.18 0.6125,0.46875 0.341796875,1.22070312) minT=0.187231244 maxT=0.729263299
	</div>
	<div id="quad21e">
	bezier_clip q1=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) q2=(0.5,0.25 0.5,0.307919381 0.473162762,0.379257381) minT=0 maxT=1
	</div>
	<div id="quad21f">
	bezier_clip q1=(0.493290691,0.311274036 0.486581381,0.343588381 0.473162762,0.379257381) q2=(0.475846194,0.304363878 0.53317904,0.507883959 0.454423387,0.847492538) minT=0.0828748517 maxT=0.150086861
	</div>

	<div id="quad21g">
	(gdb) p smaller
	$1 = {{
	x = 0.48441440743366754,
	y = 0.33903196011243797
	}, {
	x = 0.48750982503868118,
	y = 0.35346899178071778
	}, {
	x = 0.48999046908865357,
	y = 0.368520797004039
	}}
	(gdb) p larger
	$2 = {{
	x = 0.49329069058425024,
	y = 0.31127403581536672
	}, {
	x = 0.48658138116850047,
	y = 0.34358838107698753
	}, {
	x = 0.47316276233700094,
	y = 0.37925738104648321
	}}
	</div>

	<div id="quad36">
	(gdb) p fQ
	$2 = {{
	x = 1.8883839294261275,
	y = 2.1108590606904345
	}, {
	x = 1.888463903363252,
	y = 2.1111576060205435
	}, {
	x = 1.8885438199983176,
	y = 2.1114561800016824
	}}
	(gdb) p rh.fQ
	$3 = {{
	x = 1.8883839294260976,
	y = 2.1108590606903377
	}, {
	x = 1.8886366953645748,
	y = 2.1109850143489544
	}, {
	x = 1.8888888888888888,
	y = 2.1111111111111112
	}}
	(gdb)
	</div>

	<div id="quad37">
	{{x = 360.048828125, y = 229.2578125}, {x = 360.048828125, y = 224.4140625}, {x = 362.607421875, y = 221.3671875}}
	{{x = 362.607421875, y = 221.3671875}, {x = 365.166015625, y = 218.3203125}, {x = 369.228515625, y = 218.3203125}}
	</div>

	<div id="quad38">
	$2 = {{fX = 369.969421, fY = 137.94809}, {fX = 383.982849, fY = 121.260353}, {fX = 406.233154, fY = 121.260353}}
	$4 = {{fX = 406.232788, fY = 121.260353}, {fX = 409.441956, fY = 121.260353}, {fX = 412.972046, fY = 121.795212}}
	</div>

	<div id="quad39">
	{{x = 406.233154296875, y = 121.26035308837891}, {x = 406.23153587045397, y = 121.26035308837891}, {x = 406.22991748761177, y = 121.26035317666889}},
	{{x = 406.23295158013377, y = 121.26035308872596}, {x = 406.2328698329315, y = 121.26035308837889}, {x = 406.2327880859375, y = 121.26035308837891}},
	</div>

	</div>

	<script type="text/javascript">

	var testDivs = [
	quad39,
	quad38,
	quad37,
	quad36,
	quad21g,
	quad21a,
	quad21b,
	quad21c,
	quad21d,
	quad21e,
	quad21f,
	clip1,
	];

	var scale, columns, rows, xStart, yStart;

	var ticks = 10;
	var at_x = 13 + 0.5;
	var at_y = 13 + 0.5;
	var init_decimal_places = 1; // make this 3 to show more precision
	var decimal_places;
	var tests = [];
	var testTitles = [];
	var testIndex = 0;
	var ctx;
	var fat1 = true;
	var fat2 = false;
	var ctl1 = true;
	var ctl2 = false;
	var ctlPts1 = true;
	var ctlPts2 = false;
	var minScale = 1;
	var subscale = 1;

	function parse(test, title) {
	var curveStrs = test.split("{{");
	if (curveStrs.length == 1)
	curveStrs = test.split("=(");
	var pattern = /[a-z$=]?-?\d+\.\d/g;
	var curves = [];
	for (var c in curveStrs) {
	var curveStr = curveStrs[c];
	var points = curveStr.match(pattern);
	var pts = [];
	for (var wd in points) {
	var num = parseFloat(points[wd]);
	if (isNaN(num)) continue;
	pts.push(num);
	}
	if (pts.length > 0)
	curves.push(pts);
	}
	if (curves.length >= 2) {
	tests.push(curves);
	testTitles.push(title);
	}
	}

	function init(test) {
	var canvas = document.getElementById('canvas');
	if (!canvas.getContext) return;
	canvas.width = window.innerWidth - at_x;
	canvas.height = window.innerHeight - at_y;
	ctx = canvas.getContext('2d');
	var xmin = Infinity;
	var xmax = -Infinity;
	var ymin = Infinity;
	var ymax = -Infinity;
	for (var curves in test) {
	var curve = test[curves];
	var last = curve.length;
	for (var idx = 0; idx < last; idx += 2) {
	xmin = Math.min(xmin, curve[idx]);
	xmax = Math.max(xmax, curve[idx]);
	ymin = Math.min(ymin, curve[idx + 1]);
	ymax = Math.max(ymax, curve[idx + 1]);
	}
	}
	subscale = 1;
	decimal_places = init_decimal_places;
	if (xmax != xmin && ymax != ymin) {
	while ((xmax - xmin) * subscale < 0.1 && (ymax - ymin) * subscale < 0.1) {
	subscale *= 10;
	decimal_places += 1;
	// if (subscale > 100000) {
	// break;
	// }
	}
	}
	columns = Math.ceil(xmax * subscale) - Math.floor(xmin * subscale) + 1;
	rows = Math.ceil(ymax * subscale) - Math.floor(ymin * subscale) + 1;

	xStart = Math.floor(xmin * subscale) / subscale;
	yStart = Math.floor(ymin * subscale) / subscale;
	var hscale = ctx.canvas.width / columns / ticks;
	var vscale = ctx.canvas.height / rows / ticks;
	minScale = Math.floor(Math.min(hscale, vscale));
	scale = minScale * subscale;
	// while (columns < 1000 && rows < 1000) {
	// columns *= 2;
	// rows *= 2;
	// }
	}

	function drawPoint(px, py, xoffset, yoffset, unit) {
	var label = px.toFixed(decimal_places) + ", " + py.toFixed(decimal_places);
	var _px = px * unit + xoffset;
	var _py = py * unit + yoffset;
	ctx.beginPath();
	ctx.arc(_px, _py, 3, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
	ctx.fillText(label, _px + 5, _py);
	}

	function draw(test, title, _at_x, _at_y, scale) {
	ctx.fillStyle = "rgba(0,0,0, 0.1)";
	ctx.font = "normal 50px Arial";
	ctx.fillText(title, 50, 50);
	ctx.font = "normal 10px Arial";

	var unit = scale * ticks;
	ctx.lineWidth = 1;
	var i;
	for (i = 0; i <= rows * ticks; ++i) {
	ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
	ctx.beginPath();
	ctx.moveTo(_at_x + 0, _at_y + i * minScale);
	ctx.lineTo(_at_x + unit * columns, _at_y + i * minScale);
	ctx.stroke();
	}
	for (i = 0; i <= columns * ticks; ++i) {
	ctx.strokeStyle = (i % ticks) != 0 ? "rgb(160,160,160)" : "black";
	ctx.beginPath();
	ctx.moveTo(_at_x + i * minScale, _at_y + 0);
	ctx.lineTo(_at_x + i * minScale, _at_y + unit * rows);
	ctx.stroke();
	}

	var xoffset = xStart * -unit + _at_x;
	var yoffset = yStart * -unit + _at_y;

	ctx.fillStyle = "rgb(40,80,60)"
	for (i = 0; i <= columns; i += (1 / ticks))
	{
	num = xStart + i / subscale;
	ctx.fillText(num.toFixed(decimal_places), xoffset + num * unit - 5, 10);
	}
	for (i = 0; i <= rows; i += (1 / ticks))
	{
	num = yStart + i / subscale;
	ctx.fillText(num.toFixed(decimal_places), 0, yoffset + num * unit + 0);
	}

	// draw curve 1 and 2
	var curves, pts;
	for (curves in test) {
	var curve = test[curves];
	ctx.beginPath();
	ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
	switch (curve.length) {
	case 6:
	ctx.quadraticCurveTo(
	xoffset + curve[2] * unit, yoffset + curve[3] * unit,
	xoffset + curve[4] * unit, yoffset + curve[5] * unit);
	break;
	case 8:
	ctx.bezierCurveTo(
	xoffset + curve[2] * unit, yoffset + curve[3] * unit,
	xoffset + curve[4] * unit, yoffset + curve[5] * unit,
	xoffset + curve[6] * unit, yoffset + curve[7] * unit);
	break;
	}
	if (curves == 2) ctx.strokeStyle = curves ? "red" : "blue";
	ctx.stroke();
	ctx.strokeStyle = "rgba(0,0,0, 0.3)";
	ctx.beginPath();
	ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
	ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
	ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
	if (curve.length == 8)
	ctx.lineTo(xoffset + curve[6] * unit, yoffset + curve[7] * unit);
	ctx.stroke();
	}
	// optionally draw fat lines for curve
	if (fat1)
	drawFat(test[0], xoffset, yoffset, unit);
	if (fat2)
	drawFat(test[1], xoffset, yoffset, unit);
	if (ctl1)
	drawCtl(test[0], xoffset, yoffset, unit);
	if (ctl2)
	drawCtl(test[1], xoffset, yoffset, unit);
	if (ctlPts1)
	drawCtlPts(test[0], xoffset, yoffset, unit);
	if (ctlPts2)
	drawCtlPts(test[1], xoffset, yoffset, unit);
	}

	function drawCtl(curve, xoffset, yoffset, unit) {
	var last = curve.length - 2;
	ctx.strokeStyle = "rgba(0,0,0, 0.5)";
	ctx.beginPath();
	ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
	ctx.lineTo(xoffset + curve[2] * unit, yoffset + curve[3] * unit);
	ctx.lineTo(xoffset + curve[4] * unit, yoffset + curve[5] * unit);
	ctx.stroke();
	}

	function drawCtlPts(curve, xoffset, yoffset, unit) {
	drawPoint(curve[0], curve[1], xoffset, yoffset, unit);
	drawPoint(curve[2], curve[3], xoffset, yoffset, unit);
	drawPoint(curve[4], curve[5], xoffset, yoffset, unit);
	}

	function drawFat(curve, xoffset, yoffset, unit) {
	var last = curve.length - 2;
	ctx.strokeStyle = "rgba(0,0,0, 0.5)";
	ctx.beginPath();
	ctx.moveTo(xoffset + curve[0] * unit, yoffset + curve[1] * unit);
	ctx.lineTo(xoffset + curve[last] * unit, yoffset + curve[last + 1] * unit);
	ctx.stroke();
	// draw line parallel to end points through control points
	var dx = curve[last] - curve[0];
	var dy = curve[last + 1] - curve[1];
	drawParallelLine(curve[2], curve[3], dx, dy, xoffset, yoffset, unit);
	if (curve.length == 8)
	drawParallelLine(curve[4], curve[5], dx, dy, xoffset, yoffset, unit);
	}

	function drawParallelLine(x, y, dx, dy, xoffset, yoffset, unit) {
	var x1 = x - dx;
	var y1 = y - dy;
	var x2 = x + dx;
	var y2 = y + dy;
	ctx.beginPath();
	ctx.moveTo(xoffset + x1 * unit, yoffset + y1 * unit);
	ctx.lineTo(xoffset + x2 * unit, yoffset + y2 * unit);
	ctx.stroke();
	}

	function drawTop() {
	init(tests[testIndex]);
	redraw();
	}

	function redraw() {
	ctx.beginPath();
	ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
	ctx.fillStyle="white";
	ctx.fill();
	draw(tests[testIndex], testTitles[testIndex], at_x, at_y, scale);
	}

	function doKeyPress(evt) {
	var char = String.fromCharCode(evt.charCode);
	switch (char) {
	case 'c':
	ctl2 ^= true;
	if (ctl2 == false)
	ctl1 ^= true;
	drawTop();
	break;
	case 'd':
	ctlPts2 ^= true;
	if (ctlPts2 == false)
	ctlPts1 ^= true;
	drawTop();
	break;
	case 'f':
	fat2 ^= true;
	if (fat2 == false)
	fat1 ^= true;
	drawTop();
	break;
	case 'N':
	testIndex += 9;
	case 'n':
	if (++testIndex >= tests.length)
	testIndex = 0;
	mouseX = Infinity;
	drawTop();
	break;
	case 'P':
	testIndex -= 9;
	case 'p':
	if (--testIndex < 0)
	testIndex = tests.length - 1;
	mouseX = Infinity;
	drawTop();
	break;
	}
	}

	function handleMouseClick() {
	}

	function handleMouseOver() {
	}

	function start() {
	for (i = 0; i < testDivs.length; ++i) {
	var title = testDivs[i].id.toString();
	var str = testDivs[i].firstChild.data;
	parse(str, title);
	}
	drawTop();
	window.addEventListener('keypress', doKeyPress, true);
	window.onresize = function() {
	drawTop();
	}
	}

	</script>
	</head>

	<body onLoad="start();">
	<canvas id="canvas" width="750" height="500"
	onmousemove="handleMouseOver()"
	onclick="handleMouseClick()"
	></canvas >
	</body>
	</html>