How to change origin of html5 canvas?

Question

I couldn't find answers for html5 canvas. Can I change the coordinates of the origin, so that my grafics will move altogether to the right for 15px (just an example). Given the following html and css?

<canvas id="g" width="auto" height="auto">Your browser doesnt support canvas tag</canvas>

css:

canvas, section {
    display: block;
}    

#g {
    position: absolute;
    width:100%;
    height:100%;
    overflow:hidden; 
}

Answer 1

Sounds like you need a translate transform. Depending on what else you're doing with the context, you may also need to call save() and restore().

var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.save();
ctx.translate(15, 0);
// ... do stuff with the transformed origin
ctx.restore();
// ... do stuff with the canvas restored to its original state (if necessary)