diff --git a/artworld/drawable.js b/artworld/drawable.js
index d5aaf47..11337a2 100644
--- a/artworld/drawable.js
+++ b/artworld/drawable.js
@@ -29,7 +29,7 @@ export class Drawable {
   }
 
   draw() {
-    // TODO: log/raise?
+    // no-op, maybe log?
   }
 
   // setters
@@ -80,7 +80,6 @@ export class Drawable {
       Random.under(artworld.width),
       Random.under(artworld.height),
     );
-    console.log(this._posVec);
     this._stroke = new Color(
       Random.under(360),
       Random.between(30, 60),
diff --git a/artworld/index.js b/artworld/index.js
index 6090ce1..cefb701 100644
--- a/artworld/index.js
+++ b/artworld/index.js
@@ -1,6 +1,6 @@
 export { artworld } from "./world.js";
 export { Color, Pico8 } from "./color.js";
 export { Vector2, degToRad, radToDeg } from "./math.js";
-export { Line, Rect } from "./shapes.js";
+export { Line, Rect, Circle, Arc } from "./shapes.js";
 export { Group } from "./drawable.js";
 export { Random } from "./random.js";
diff --git a/artworld/random.js b/artworld/random.js
index ddbda86..6d77338 100644
--- a/artworld/random.js
+++ b/artworld/random.js
@@ -5,7 +5,6 @@ export class Random {
 
   static under(num) {
     let n = Math.random() * num;
-    console.log("under", num, n);
     return n;
   }
 
diff --git a/artworld/shapes.js b/artworld/shapes.js
index 183d4cc..888b8d8 100644
--- a/artworld/shapes.js
+++ b/artworld/shapes.js
@@ -34,9 +34,7 @@ export class Arc extends Drawable {
   }
 
   draw() {
-    artworld.setStrokeColor(this._stroke);
-    artworld.setStrokeWeight(this._strokeWeight);
-    artworld.setFillColor(this._fill);
+    artworld.prepareDraw(this);
     artworld.drawArc(this.worldPos, this._r, this._startAngle, this._endAngle);
   }
 
@@ -61,10 +59,8 @@ export class Circle extends Drawable {
   }
 
   draw() {
-    artworld.setStrokeColor(this._stroke);
-    artworld.setStrokeWeight(this._strokeWeight);
-    artworld.setFillColor(this._fill);
-    artworld.drawArc(this.worldPos, this._r, 0, 360);
+    artworld.prepareDraw(this);
+    artworld.drawArc(this.worldPos, this._r, 0, 2 * Math.PI);
   }
 
   radius(scalar) {
@@ -88,9 +84,7 @@ export class Rect extends Drawable {
   }
 
   draw() {
-    artworld.setStrokeColor(this._stroke);
-    artworld.setStrokeWeight(this._strokeWeight);
-    artworld.setFillColor(this._fill);
+    artworld.prepareDraw(this);
     artworld.drawRect(this.worldPos, this._width, this._height);
   }
 
diff --git a/artworld/world.js b/artworld/world.js
index 83c3b40..79a70b8 100644
--- a/artworld/world.js
+++ b/artworld/world.js
@@ -21,25 +21,28 @@ export class World {
   }
 
   draw() {
-    for (let d of this.drawables) {
+    for (let d of this.drawables.sort((a, b) => a._z_index - b._z_index)) {
       d.draw();
     }
   }
 
   // Canvas 2D /////////////////
 
-  setStrokeWeight(scalar) {
-    this.ctx.lineWidth = scalar;
-  }
-
-  setStrokeColor(color) {
-    if (color && color.toStr) this.ctx.strokeStyle = color.toStr();
-    else this.ctx.strokeStyle = color;
-  }
-
-  setFillColor(color) {
-    if (color && color.toStr) this.ctx.fillStyle = color.toStr();
-    else this.ctx.fillStyle = color;
+  prepareDraw(drawable) {
+    this._stroke = false;
+    this._fill = false;
+    if (drawable._stroke) {
+      this.ctx.lineWidth = drawable._strokeWidth;
+      this.ctx.strokeStyle = drawable._stroke.toStr
+        ? drawable._stroke.toStr()
+        : drawble._stroke;
+      this._stroke = true;
+    } else if (drawable._fill) {
+      this.ctx.fillStyle = drawable._fill.toStr
+        ? drawable._fill.toStr()
+        : drawable._fill;
+      this._fill = true;
+    }
   }
 
   drawLine(from, to) {
@@ -52,15 +55,15 @@ export class World {
   drawArc(center, radius, fromAngle, toAngle) {
     this.ctx.beginPath();
     this.ctx.arc(center.x, center.y, radius, fromAngle, toAngle);
-    this.ctx.stroke();
-    this.ctx.fill();
+    if (this._stroke) this.ctx.stroke();
+    if (this._fill) this.ctx.fill();
   }
 
   drawRect(center, width, height) {
     this.ctx.beginPath();
     this.ctx.rect(center.x - width / 2, center.y - height / 2, width, height);
-    this.ctx.fill();
-    this.ctx.stroke();
+    if (this._stroke) this.ctx.stroke();
+    if (this._fill) this.ctx.fill();
   }
 }
 
diff --git a/examples/circles.html b/examples/circles.html
new file mode 100644
index 0000000..8c5c577
--- /dev/null
+++ b/examples/circles.html
@@ -0,0 +1,38 @@
+<html>
+  <head> </head>
+  <body>
+    <canvas id="mainCanvas" width="500" height="500"></canvas>
+    <script type="module">
+      import {
+        artworld,
+        Color,
+        Pico8,
+        Group,
+        Circle,
+        Random,
+        Vector2,
+        degToRad,
+      } from "../artworld/index.js";
+      artworld.bindCanvas("mainCanvas");
+      window.artworld = artworld;
+
+      function* color_cycle() {
+        while (true) {
+          yield Pico8.RED;
+          yield Pico8.ORANGE;
+          yield Pico8.YELLOW;
+        }
+      }
+      let cycle = color_cycle();
+
+      let g = new Group().pos(new Vector2(250, 250));
+      for (let r = 20; r < 100; r += 12) {
+        new Circle(g).radius(r).fill(cycle.next().value).z(-r).strokeWeight(0);
+      }
+      for (let r = 100; r < 250; r += 12) {
+        new Circle(g).radius(r).fill(cycle.next().value).z(-r).strokeWeight(0);
+      }
+      artworld.draw();
+    </script>
+  </body>
+</html>