add offscreen canvas

V203/usb/scope/bin/index.html

@@ -24,7 +24,7 @@
           }
           fieldset {
             background-color: #C0FFC0;
-            height: 100%;
+            height: 80%;
           }
           tr,td {
             height: 100%;

V203/usb/scope/bin/index.js

@@ -11,6 +11,7 @@ const StartBut    = document.getElementById ('Start');
 const ConnectBut  = document.getElementById ('Connect');
 const Connected   = document.getElementById ('Connected');
 const Canvas      = document.getElementById ('canvas');
+var gBGCanvas     = null;
 
 const REF_Y = 3.3;
 const MAX_Y = 4096.0;
@@ -76,6 +77,7 @@ function RefreshSettings (obj) {
   document.getElementById('trigger_edge').value = obj.rising;
   document.getElementById('time_base'   ).value = obj.tim;
   gTC.x = obj.offset; gTC.y = obj.value;
+  DrawBG   ();
   DrawTrig ();
 };
 function ReloadMatrix (sz) {
@@ -98,10 +100,11 @@ function SendEvent (evt) {
   if (!connected) return;
   const reply = JSON.stringify(evt);
   websocket.send (reply);
-}
+};
-function DrawTrig () {
+function DrawBG () {
-  var ctx = Canvas.getContext('2d');
+  var ctx = gBGCanvas.getContext('2d');
-  ctx.clearRect(0, 0, Canvas.width, Canvas.height);
+  ctx.fillStyle = "black";
+  ctx.fillRect(0, 0, gBGCanvas.width, gBGCanvas.height);
   ctx.lineWidth = 2.0;
   ctx.strokeStyle = 'blue';
   ctx.beginPath();
@@ -117,6 +120,11 @@ function DrawTrig () {
   ctx.moveTo(b.x, b.y);
   ctx.lineTo(e.x, e.y);
   ctx.stroke();
+  // dopsat grid, markers
+};
+function DrawTrig () {
+  var context = Canvas.getContext('2d');
+  context.drawImage (gBGCanvas, 0, 0);
 };
 function DrawPolyLine (ch, data, col) {
   var out = ch === 0 ? gCA : gCB;
@@ -150,6 +158,7 @@ Canvas.addEventListener ('click', function(event) {
     case 1: gTC.x = q.x; SendEvent ({ type : "trg_ofs", value: q.x }); break;
     default: return;
   };
+  DrawBG   ();
   DrawTrig ();
 });
 /************************************************************************/
@@ -196,6 +205,7 @@ window.onload = (event) => {
     gCB.push (1000);
   }
   wsUri = js_get_id ();
+  gBGCanvas = new OffscreenCanvas (dim.x, dim.y);
 };
 function Connect () {
   if (connected) {