Translate HTML5 Canvas (ย้ายจุดกำเนิด)

เมธอด translate(x, y)

ย้าย Origin (0,0) ของ Canvas ไปยังตำแหน่งใหม่ ทุกการวาดต่อไปจะอิงจุดใหม่

ตัวอย่าง: วาด Spirograph หลายตำแหน่ง

function drawShape() {
    var canvas = document.getElementById('mycanvas');
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        ctx.fillRect(0, 0, 300, 300); // พื้นหลัง
        
        for (var i = 0; i < 3; i++) {
            for (var j = 0; j < 3; j++) {
                ctx.save(); // บันทึก State
                ctx.strokeStyle = "#FF0066";
                // ย้าย Origin ไป (50+j*100, 50+i*100)
                ctx.translate(50 + j * 100, 50 + i * 100);
                drawSpirograph(ctx, 10*(j+3)/(j+2), -2*(i+3)/(i+1), 10);
                ctx.restore(); // คืน State
            }
        }
    }
}

function drawSpirograph(ctx, R, r, O) {
    // ... วาด Spirograph ที่ Origin (0,0) ...
}

save()/restore() สำคัญมาก สำหรับกลับสู่ Origin เดิมหลังวาดแต่ละอัน