Now to the point of this --
how to display a non-scrolling score in a scroller.
It turns out it's remarkably easy.
You just display it as you would normally, but you do it before the translate.
If you moved those two lines to after the translate, the score would scroll off when the viewport changes.
Easy !
function Do_a_Frame () {
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
ctx.font= "14px Arial";
ctx.fillText(fruit_remaining + " left", 260, 20);
ctx.save();
ctx.translate(viewport_offset_x, viewport_offset_y);
handle_keys_that_are_pressed();
for (var i=0; i < obstacles.length; i++) obstacles[i].Do_Frame_Things();
for (var i=0; i < fruit.length; i++) {
fruit[i].Do_Frame_Things();
if (ImagesTouching(fruit[i], hero, 10)) make_bad_thing_happen_to_fruit(fruit[i]);
}
hero.Do_Frame_Things();
ctx.restore();
}