For rectangle tool, draw stroke inside bounds

TODO.md

@@ -172,10 +172,6 @@ might be a pointer events spec interpretation issue, and it could easily be that
 	SVG (or HTML?) with invisible selectable transformed text elements?
 
 
-* Rectangle
-	* The stroke should go within the rectangle
-
-
 * Polygon
 	* Issue with extra undoables
 	* Close and finalize the polygon when switching to a different tool
@@ -186,28 +182,20 @@ might be a pointer events spec interpretation issue, and it could easily be that
 	* Investigate bug: unclosed polygon (last segment of stroke) (only saw it happen once so far)
 
 
-* Ellipse
-	* See Shape Styles and Strokes below
-
-
-* Rounded Rectangle
-	* See Shape Styles and Strokes below
-
-
 * **Options**
 	* In MS Paint, visual area =/= selection highlight area =/= clickable area
 
 
 * **Shape Styles and Strokes**
 	* Shapes: respond to Ctrl (It's complicated)
+	* Tools that use circle "brushes" for strokes should treat the stroke size as a simple diameter
 	* Rounded Rectangle & Ellipse:
 		* Support stroke size and shape styles!
-	* Rectangle, Rounded Rectangle & Ellipse:
 		* Stroke should be entirely inside the dragged region
 	* Handle patterns (black and white mode)
 		* Still needed for brush and fill
 		* Check to make sure patterns are aligned properly for all the tools
-	* Remove `show_shape_styles_warning` (for Polygon & Line & Curve (& Rectangle), or implement shape styles for the rest of the tools)
+	* Remove `show_shape_styles_warning` (for Polygon & Line & Curve & Rectangle, or implement shape styles for the rest of the tools)
 
 
 ### On-Canvas Objects

src/image-manipulation.js

@@ -1,6 +1,10 @@
 
 function render_brush(ctx, shape, size){
 	if(shape === "circle"){
+		// FIXME: remove this nonsense
+		// this function is currently geared towards approximating the brush previews in the tool options
+		// and it's not done very well anyways
+		// the stroke size should be treated as an exact diameter
 		size /= 2;
 		size += 0.25;
 	}else if(shape.match(/diagonal/)){

src/tool-options.js

@@ -187,6 +187,7 @@ var $choose_brush = $Choose(
 		var shape = o.shape;
 		var size = o.size;
 		if(shape === "circle"){
+			// FIXME: remove this nonsense
 			size -= 1;
 		}
 		

src/tools.js

@@ -484,14 +484,27 @@ tools = [{
 			ctx.fillRect(x, y, w, h);
 		}
 		if(this.$options.stroke){
-			// FIXME: can draw 1x2 or 2x1 pixels of a rectangle with a stroke of 1px (the default)
-			// which doesn't get drawn at full opacity
-			// or more generally, a 0-width or 0-height rectangle gives
-			// non-full-opacity pixels at either side of the resulting line drawn
-			if((stroke_size % 2) === 1){
-				ctx.strokeRect(x-0.5, y-0.5, w, h);
+
+			// if(Math.abs(w) < stroke_size * 2 || Math.abs(h) < stroke_size * 2){
+			// 	ctx.save();
+			// 	ctx.fillStyle = ctx.strokeStyle;
+			// 	ctx.fillRect(x, y, w, h);
+			// 	ctx.restore();
+			// }else{
+			// 	ctx.strokeRect(x + stroke_size / 2, y + stroke_size / 2, w - stroke_size, h - stroke_size);
+			// }
+
+			var normalized_x = Math.min(x, x + w);
+			var normalized_y = Math.min(y, y + h);
+			var normalized_w = Math.abs(w);
+			var normalized_h = Math.abs(h);
+			if(normalized_w < stroke_size * 2 || normalized_h < stroke_size * 2){
+				ctx.save();
+				ctx.fillStyle = ctx.strokeStyle;
+				ctx.fillRect(normalized_x, normalized_y, normalized_w, normalized_h);
+				ctx.restore();
 			}else{
-				ctx.strokeRect(x, y, w, h);
+				ctx.strokeRect(normalized_x + stroke_size / 2, normalized_y + stroke_size / 2, normalized_w - stroke_size, normalized_h - stroke_size);
 			}
 		}
 	},