HTML - Canvas 1

See the following HTML canvas code. How do I modify the code so that the two lines break off around the text. Thank you.

<html><body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.moveTo(0,100);
ctx.lineTo(200,0);
ctx.stroke();
ctx.font = 'bold 20px Arial';
ctx.fillText('Hello there', 50, 50);
</script>
</body></html>