Pulled from some of last year's code, I was prototyping a top down scroller in JS/Canvas. The principles the same, you translate your canvas by some value representing your offset from the world origin, and then draw images to it, and lastly restore the canvas's transform state to what it was originally.
this.context = this.canvas.getContext('2d');
context.save(); //save the existing canvas transform state (identity matrix)
context.translate(-(sprite.width/2), -(sprite.height/2)); //centring
context.drawImage(image, 0 ,0);
//remove the just-created transforms so you're back to working with an identity
//matrix -- or whatever matrix you had in place before .save() -- they're nestable.
(The context acts like a stack to store to the transformations -- which is really just a multiplication of matrices where if you save the state of the master matrix, and multiply further matrices into it, you can remove them by restoring the saved state. Undo function for matrices.)
I remember that there were some issues for me with ordering, i.e. generally you will translate a sprite to centre it first, then rotate it, then position it in screen space, however as you can see above the order from my working code was actually the reverse order. Just a heads up so you know you'll probably have to fiddle this a bit to get it right.
PS. I can't recall whether
drawImage() accepts negative coordinates, but if so you should be able specify your sprite centring there and remove the second call to