Remove canvas rectangle border on mouseout

Let's say I create a rectangle on the canvas like so...

var c = document.createElement("canvas");
document.body.appendChild(c);
var ctx = c.getContext("2d");
ctx.rect(20, 20, 150, 100);
ctx.fillText('hover mouse here', 60, 60);

c.addEventListener('mouseover', function() {
    ctx.stroke();
});

Then, when you move your mouse over the text, the border appears around the rectangle. But let's say I wanted the border to then disappear after the mouse leaves the canvas area. Do I need to redraw the entire rectangle or is there an easier way to remove the border?

This is just a simple example. My actual canvas contains several drawings in the rectangle, so it would be a pain to have to redraw it every time. Just curious if there's a simpler way.

I already tried style attributes but that doesn't work.

Here's a fiddle of the above code: http://ift.tt/1C2yozA