diff --git a/html/js/mobile-automata.mjs b/html/js/mobile-automata.mjs
index 4b7235f..e09c8b1 100644
--- a/html/js/mobile-automata.mjs
+++ b/html/js/mobile-automata.mjs
@@ -273,7 +273,8 @@ export function cyclicMa(rules, initialState, t) {
 
 export function renderToCanvas(canvas, width, height, sn = 13252213, dn = 180) {
   const r = 1;
-  const rules = toMaRule(sn, dn, 2 * r + 1, 2);
+  const n = 2 * r + 1;
+  const rules = toMaRule(sn, dn, n, 2);
   let states = Array.from({ length: height }, () => Array(width).fill(0));
   let head = Math.floor(width / 2) % width;
   let row_num = 0;
@@ -298,7 +299,7 @@ export function renderToCanvas(canvas, width, height, sn = 13252213, dn = 180) {
     }
 
     // update canvas (only this row)
-    ctx.putImageData(img, 0, row_num, 0, 0, width, 1);
+    ctx.putImageData(img, head - r, row_num, 0, 0, n, 1);
 
     // advance row and head
     row_num = (row_num + 1) % height;