Commits

Anonymous committed 4660145

Allow scrolling around a big canvas.

  • Participants
  • Parent commits 9ab75b1

Comments (0)

Files changed (2)

   </script>
   <style>
 #canvas { border: 1px solid blue; }
+#canvas_viewport {
+    width: 420px; height: 420px; overflow: scroll; border: 1px solid black;
+    display: inline-block;
+}
 #info { float: right; }
   </style>
 </head>
 <button id="stop">Stop</button>
 </h1>
 
-<canvas id="canvas" width="400" height="400">
-Your browser doesn't support displaying an HTML5 canvas.
-</canvas>
+<div id="canvas_viewport">
+  <canvas id="canvas" width="400" height="400">
+    Your browser doesn't support displaying an HTML5 canvas.
+  </canvas>
+</div>
 
 <textarea id="program" rows="25" cols="40">
 %   @@   @@
     var ip = new yoob.Cursor(0, 0, 1, 1);
     var dp = new yoob.Cursor(0, 0, 0, 0);
 
+    var c_width = canvas.width;
+    var c_height = canvas.height;
+
     this.draw = function() {
         var ctx = canvas.getContext('2d');
 
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.textBaseline = "top";
-
         var height = 20;
         ctx.font = height + "px monospace";
         var width = ctx.measureText("@").width;
 
+        var sym_width = (p.max_x - p.min_x + 1) * width;
+        var sym_height = (p.max_y - p.min_y + 1) * height;
+
+        canvas.width = sym_width;
+        canvas.height = sym_height;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.textBaseline = "top";
+        ctx.font = height + "px monospace";
+
         ctx.fillStyle = "#ff5080";
         ctx.fillRect(ip.x * width, ip.y * height, width, height);