refactor: frontend: Remove jQuery usage in CanvasModule.js

mesa/visualization/templates/js/CanvasModule.js

@@ -4,26 +4,39 @@ const CanvasModule = function (
   grid_width,
   grid_height
 ) {
+  const createElement = (tagName, attrs) => {
+    const element = document.createElement(tagName);
+    Object.assign(element, attrs);
+    return element;
+  };
+
   // Create the element
   // ------------------
+  //
+  const parent = createElement("div", {
+    style: `height:${canvas_height}px;`,
+    className: "world-grid-parent",
+  });
 
   // Create the tag with absolute positioning :
-  const canvas_tag = `<canvas width="${canvas_width}" height="${canvas_height}" class="world-grid"/>`;
-
-  const parent_div_tag =
-    '<div style="height:' +
-    canvas_height +
-    'px;" class="world-grid-parent"></div>';
+  const createCanvas = () => {
+    const el = createElement("canvas", {
+      width: canvas_width,
+      height: canvas_height,
+      className: "world-grid",
+    });
+    return el;
+  };
+  const canvas = createCanvas();
+  const interaction_canvas = createCanvas();
 
-  // Append it to body:
-  const canvas = $(canvas_tag)[0];
-  const interaction_canvas = $(canvas_tag)[0];
-  const parent = $(parent_div_tag)[0];
+  // Append it to parent:
+  parent.appendChild(canvas);
+  parent.appendChild(interaction_canvas);
 
-  //$("body").append(canvas);
-  $("#elements").append(parent);
-  parent.append(canvas);
-  parent.append(interaction_canvas);
+  // Append it to #elements
+  const elements = document.getElementById("elements");
+  elements.appendChild(parent);
 
   // Create the context for the agents and interactions and the drawing controller:
   const context = canvas.getContext("2d");
@@ -45,13 +58,13 @@ const CanvasModule = function (
     interactionHandler
   );
 
-  this.render = function (data) {
+  this.render = (data) => {
     canvasDraw.resetCanvas();
     for (const layer in data) canvasDraw.drawLayer(data[layer]);
     canvasDraw.drawGridLines("#eee");
   };
 
-  this.reset = function () {
+  this.reset = () => {
     canvasDraw.resetCanvas();
   };
 };