You can use compositing to draw into text (effectively clipping to inside the text)
context.globalCompositeOperation="source-in" will draw new drawings only where the exsiting text and the new shapes overlap (any non-overlapping areas are made transparent).
Here's example code and a Demo: http://jsfiddle.net/m1erickson/yWuw7/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/water.jpg";
function start(){
canvas.width=img.width;
canvas.height=img.height;
ctx.font="138 verdana";
ctx.fillText("See the",20,150);
ctx.fillText("Sea",20,300);
ctx.globalCompositeOperation="source-in";
ctx.drawImage(img,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Water image clipped to text using Compositing.</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
If you want to put a rectangle around the text, you can then use another composite ("destination-over") which lets you draw new shapes under existing pixels
ctx.globalCompositeOperation="destination-over";
ctx.fillRect(15,20,275,150);
[ Addition: applying clipped text to an existing background ]
If you want to preserve the background, you can easily create an offscreen canvas and do the text-composite-drawImage on that temporary canvas. Then draw the temporary canvas to your visible canvas with drawImage. That way you have your clipped text plus keep the existing background.
A Demo: http://jsfiddle.net/m1erickson/n7x8y/