<div style='position:relative;width:500px;height:100px;border:solid 1px #f00;'>
<div id="target" style='position:absolute;left:0;top:0'></div>
</div>
<script type="text/javascript">
onload=drawMyBox;

function drawMyBox() {
	var canvas = document.createElement("canvas");
	canvas.setAttribute("width", "500");
	canvas.setAttribute("height", "100");
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 450, 26, 1, "愛" );
	box( ctx, 0, 30, 450, 40, 1, "愛" );

	function box(c,x,y,w,h,lw,s) {

		c.beginPath();
		c.strokeStyle = "#000000";
		c.rect(x+(lw/2), y+(lw/2), w-lw, h-lw);
		c.lineWidth = lw;
		c.stroke();

		c.beginPath();
		c.font = "bold "+ (h-10) + "pt 'ＭＳ Ｐゴシック'";
		var m = c.measureText(s);
		c.fillText( s, x+4, y+h-5 );
		c.fillText( s, w - m.width-4*2+4, y+h-5 );
		c.stroke();

	}


}

</script>