diff --git a/examples/basic-canvas.html b/examples/basic-canvas.html
new file mode 100644
index 0000000..d9610eb
--- /dev/null
+++ b/examples/basic-canvas.html
@@ -0,0 +1,39 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+<html>
+ <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Flot Examples</title>
+    <link href="layout.css" rel="stylesheet" type="text/css">
+    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="../excanvas.min.js"></script><![endif]-->
+    <script language="javascript" type="text/javascript" src="../jquery.js"></script>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.js"></script>
+    <script language="javascript" type="text/javascript" src="../jquery.flot.canvas.js"></script>
+ </head>
+    <body>
+    <h1>Flot Examples</h1>
+
+    <div id="placeholder" style="width:600px;height:300px;"></div>
+
+    <p>Simple example. You don't need to specify much to get an
+       attractive look. Put in a placeholder, make sure you set its
+       dimensions (otherwise the plot library will barf) and call the
+       plot function with the data. The axes are automatically
+       scaled.</p>
+
+<script type="text/javascript">
+$(function () {
+    var d1 = [];
+    for (var i = 0; i < 14; i += 0.5)
+        d1.push([i, Math.sin(i)]);
+
+    var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]];
+
+    // a null signifies separate line segments
+    var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]];
+    
+    $.plot($("#placeholder"), [ d1, d2, d3 ], {canvas: true});
+});
+</script>
+
+ </body>
+</html>
diff --git a/jquery.flot.canvas.js b/jquery.flot.canvas.js
index 3499d50..81e0b3e 100644
--- a/jquery.flot.canvas.js
+++ b/jquery.flot.canvas.js
@@ -201,7 +201,11 @@ browser, but needs to redraw with canvas text when exporting as an image.
 
 					var element = $("<div></div>").html(text)
 						.addClass(typeof font === "string" ? font : null)
-						.appendTo(this.container);
+						.css({
+							position: "absolute",
+							top: -9999
+						})
+						.appendTo(this.getTextLayer());
 
 					font = {
 						style: element.css("font-style"),
diff --git a/jquery.flot.js b/jquery.flot.js
index 6c0db7b..6823e3c 100644
--- a/jquery.flot.js
+++ b/jquery.flot.js
@@ -56,8 +56,6 @@ Licensed under the MIT license.
 
 	function Canvas(cls, container) {
 
-		this.container = container;
-
 		var element = document.createElement("canvas");
 		element.className = cls;
 		this.element = element;
@@ -292,10 +290,12 @@ Licensed under the MIT license.
 
 		if (info == null) {
 
-			var element = $("<div></div>").html(text).css({
-				position: "absolute",
-				top: -9999
-			});
+			var element = $("<div></div>").html(text)
+				.css({
+					position: "absolute",
+					top: -9999
+				})
+				.appendTo(this.getTextLayer());
 
 			if (typeof font === "object") {
 				element.css({
@@ -306,8 +306,6 @@ Licensed under the MIT license.
 				element.addClass(font);
 			}
 
-			element.appendTo(this.container);
-
 			info = {
 				active: false,
 				rendered: false,
