diff --git a/craco.config.js b/craco.config.js
index a573d832d7..54d3fccf49 100644
--- a/craco.config.js
+++ b/craco.config.js
@@ -45,7 +45,7 @@ const cracoConfig = (module.exports = {
   jest: {
     configure: jestConfig => {
       jestConfig.transformIgnorePatterns = [
-        '[/\\\\]node_modules[/\\\\](?!(@ion-phaser[/\\\\]react[/\\\\])|(array-move[/\\\\])).*\\.(js|jsx|ts|tsx)$',
+        '[/\\\\]node_modules[/\\\\](?!(@ion-phaser[/\\\\]react[/\\\\])|(array-move[/\\\\])|(konva[/\\\\.*])|(react-konva[/\\\\.*])).*\\.(js|jsx|ts|tsx)$',
         '^.+\\.module\\.(css|sass|scss)$'
       ];
       jestConfig.moduleNameMapper['ace-builds'] = '<rootDir>/node_modules/ace-builds';
diff --git a/package.json b/package.json
index 5b8d264fbb..5d4be8692e 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "flexboxgrid": "^6.3.1",
     "flexboxgrid-helpers": "^1.1.3",
     "js-slang": "^0.5.23",
-    "konva": "^7.2.5",
+    "konva": "^8.3.1",
     "lodash": "^4.17.21",
     "lz-string": "^1.4.4",
     "moment": "^2.29.1",
@@ -116,14 +116,13 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "babel-core": "6",
     "babel-runtime": "^6.26.0",
+    "canvas": "^2.8.0",
     "coveralls": "^3.1.1",
     "cross-env": "^7.0.3",
     "enzyme": "^3.11.0",
     "eslint": "7",
     "eslint-plugin-simple-import-sort": "^7.0.0",
     "husky": "^7.0.4",
-    "jest-canvas-mock": "^2.3.1",
-    "konva-node": "^0.11.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "react-scripts": "^4.0.3",
@@ -144,4 +143,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx b/src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx
index 905205e049..69f2b00591 100644
--- a/src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx
+++ b/src/commons/sideContent/__tests__/SideContentEnvVisualizer.tsx
@@ -9,9 +9,7 @@ import SideContentEnvVisualizer from '../SideContentEnvVisualizer';
  * This is to fix some weird bug with Jest and Konva
  * See https://github.com/konvajs/konva/issues/200
  */
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const Konva = require('konva-node');
-Konva.isBrowser = false;
+// Konva.isBrowser = false;
 
 test('EnvVisualizer component renders correctly', () => {
   const app = <SideContentEnvVisualizer />;
diff --git a/src/features/envVisualizer/EnvVisualizerLayout.tsx b/src/features/envVisualizer/EnvVisualizerLayout.tsx
index a18823774f..95a63140c4 100644
--- a/src/features/envVisualizer/EnvVisualizerLayout.tsx
+++ b/src/features/envVisualizer/EnvVisualizerLayout.tsx
@@ -1,8 +1,7 @@
 import { Context } from 'js-slang';
 import { Frame } from 'js-slang/dist/types';
 import React from 'react';
-import { Rect } from 'react-konva';
-import { Layer, Stage } from 'react-konva';
+import { Layer, Rect, Stage } from 'react-konva';
 
 import { Level } from './components/Level';
 import { ArrayValue } from './components/values/ArrayValue';
diff --git a/src/features/envVisualizer/EnvVisualizerTypes.ts b/src/features/envVisualizer/EnvVisualizerTypes.ts
index 53e67000de..c822d8134e 100644
--- a/src/features/envVisualizer/EnvVisualizerTypes.ts
+++ b/src/features/envVisualizer/EnvVisualizerTypes.ts
@@ -3,7 +3,7 @@ import {
   EnvTreeNode as EnvironmentTreeNode
 } from 'js-slang/dist/createContext';
 import { Environment } from 'js-slang/dist/types';
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 
 import { ArrayUnit } from './components/ArrayUnit';
 import { Binding } from './components/Binding';
diff --git a/src/features/envVisualizer/EnvVisualizerUtils.ts b/src/features/envVisualizer/EnvVisualizerUtils.ts
index 95fc22fb74..8073e76eab 100644
--- a/src/features/envVisualizer/EnvVisualizerUtils.ts
+++ b/src/features/envVisualizer/EnvVisualizerUtils.ts
@@ -1,5 +1,7 @@
 import { Environment } from 'js-slang/dist/types';
-import { Node } from 'konva/types/Node';
+import { Group } from 'konva/lib/Group';
+import { Node } from 'konva/lib/Node';
+import { Shape } from 'konva/lib/Shape';
 import { cloneDeep } from 'lodash';
 
 import { Value } from './components/values/Value';
@@ -178,11 +180,12 @@ export function getBodyText(data: () => any): string {
 }
 
 /** Updates the styles of a Konva node and its children on hover, and then redraw the layer */
-export function setHoveredStyle(target: Node, hoveredAttrs: any = {}): void {
+export function setHoveredStyle(target: Node | Group, hoveredAttrs: any = {}): void {
   const container = target.getStage()?.container();
   container && (container.style.cursor = 'pointer');
 
-  const nodes = Array.from(target.children);
+  const nodes: (Group | Shape | Node)[] =
+    target instanceof Group ? Array.from(target.children || []) : [];
   nodes.push(target);
   nodes.forEach(node => {
     node.setAttrs({
@@ -202,12 +205,14 @@ export function setHoveredStyle(target: Node, hoveredAttrs: any = {}): void {
 }
 
 /** Updates the styles of a Konva node and its children on unhover, and then redraw the layer */
-export function setUnhoveredStyle(target: Node, unhoveredAttrs: any = {}): void {
+export function setUnhoveredStyle(target: Node | Group, unhoveredAttrs: any = {}): void {
   const container = target.getStage()?.container();
   container && (container.style.cursor = 'default');
 
-  const nodes = Array.from(target.children);
+  const nodes: (Group | Shape | Node)[] =
+    target instanceof Group ? Array.from(target.children || []) : [];
   nodes.push(target);
+
   nodes.forEach(node => {
     node.setAttrs({
       stroke: node.attrs.stroke ? Config.SA_WHITE.toString() : node.attrs.stroke,
diff --git a/src/features/envVisualizer/components/ArrayEmptyUnit.tsx b/src/features/envVisualizer/components/ArrayEmptyUnit.tsx
index 013b5a9c51..f544fbbdcb 100644
--- a/src/features/envVisualizer/components/ArrayEmptyUnit.tsx
+++ b/src/features/envVisualizer/components/ArrayEmptyUnit.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Rect } from 'react-konva';
 
diff --git a/src/features/envVisualizer/components/ArrayNullUnit.tsx b/src/features/envVisualizer/components/ArrayNullUnit.tsx
index 6ae56a1ea0..15be247b92 100644
--- a/src/features/envVisualizer/components/ArrayNullUnit.tsx
+++ b/src/features/envVisualizer/components/ArrayNullUnit.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Line as KonvaLine } from 'react-konva';
 import { setHoveredStyle, setUnhoveredStyle } from 'src/features/envVisualizer/EnvVisualizerUtils';
diff --git a/src/features/envVisualizer/components/ArrayUnit.tsx b/src/features/envVisualizer/components/ArrayUnit.tsx
index 577b17c8f8..341b0aec01 100644
--- a/src/features/envVisualizer/components/ArrayUnit.tsx
+++ b/src/features/envVisualizer/components/ArrayUnit.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 
 import { Config } from '../EnvVisualizerConfig';
diff --git a/src/features/envVisualizer/components/Frame.tsx b/src/features/envVisualizer/components/Frame.tsx
index 4ab7d4efe4..b25dbb9e66 100644
--- a/src/features/envVisualizer/components/Frame.tsx
+++ b/src/features/envVisualizer/components/Frame.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Rect } from 'react-konva';
 
diff --git a/src/features/envVisualizer/components/Text.tsx b/src/features/envVisualizer/components/Text.tsx
index 6f711583bf..01dd24b864 100644
--- a/src/features/envVisualizer/components/Text.tsx
+++ b/src/features/envVisualizer/components/Text.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import { Label as KonvaLabel, Tag as KonvaTag, Text as KonvaText } from 'react-konva';
 
diff --git a/src/features/envVisualizer/components/arrows/GenericArrow.tsx b/src/features/envVisualizer/components/arrows/GenericArrow.tsx
index f7769de24a..98bce3e5b1 100644
--- a/src/features/envVisualizer/components/arrows/GenericArrow.tsx
+++ b/src/features/envVisualizer/components/arrows/GenericArrow.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import { Arrow as KonvaArrow } from 'react-konva';
 
 import { Config, ShapeDefaultProps } from '../../EnvVisualizerConfig';
diff --git a/src/features/envVisualizer/components/shapes/RoundedRect.tsx b/src/features/envVisualizer/components/shapes/RoundedRect.tsx
index 0c4c094c60..aa79fb79e9 100644
--- a/src/features/envVisualizer/components/shapes/RoundedRect.tsx
+++ b/src/features/envVisualizer/components/shapes/RoundedRect.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React from 'react';
 import { Shape } from 'react-konva';
 
diff --git a/src/features/envVisualizer/components/values/FnValue.tsx b/src/features/envVisualizer/components/values/FnValue.tsx
index 173a441cd1..53a143803e 100644
--- a/src/features/envVisualizer/components/values/FnValue.tsx
+++ b/src/features/envVisualizer/components/values/FnValue.tsx
@@ -1,5 +1,5 @@
 import { Environment } from 'js-slang/dist/types';
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import {
   Circle,
diff --git a/src/features/envVisualizer/components/values/GlobalFnValue.tsx b/src/features/envVisualizer/components/values/GlobalFnValue.tsx
index a5e7e11311..23df2e4b82 100644
--- a/src/features/envVisualizer/components/values/GlobalFnValue.tsx
+++ b/src/features/envVisualizer/components/values/GlobalFnValue.tsx
@@ -1,4 +1,4 @@
-import { KonvaEventObject } from 'konva/types/Node';
+import { KonvaEventObject } from 'konva/lib/Node';
 import React, { RefObject } from 'react';
 import {
   Circle,
diff --git a/src/setupTests.ts b/src/setupTests.ts
index 2a29574ce4..d42e392be3 100644
--- a/src/setupTests.ts
+++ b/src/setupTests.ts
@@ -1,5 +1,3 @@
-import 'jest-canvas-mock';
-
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { configure } from 'enzyme';
 configure({ adapter: new Adapter() });
diff --git a/yarn.lock b/yarn.lock
index 26c5c58e2f..c137f003b0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3944,7 +3944,7 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30001109, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001294.tgz#4849f27b101fd59ddee3751598c663801032533d"
   integrity sha512-LiMlrs1nSKZ8qkNhpUf5KD0Al1KCBE3zaT7OLOwEkagXMEDij98SiOovn9wxVGQpklk9vVC/pUSqgYmkmKOS8g==
 
-canvas@^2.5.0:
+canvas@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.8.0.tgz#f99ca7f25e6e26686661ffa4fec1239bbef74461"
   integrity sha512-gLTi17X8WY9Cf5GZ2Yns8T5lfBOcGgFehDFb+JQwDqdOoBOcECS9ZWMEAqMSVcMYwXD659J8NyzjRY/2aE+C2Q==
@@ -4222,7 +4222,7 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
 
-color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
+color-name@^1.0.0, color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@@ -4733,11 +4733,6 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
-cssfontparser@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/cssfontparser/-/cssfontparser-1.2.1.tgz#f4022fc8f9700c68029d542084afbaf425a3f3e3"
-  integrity sha1-9AIvyPlwDGgCnVQghK+69CWj8+M=
-
 cssnano-preset-default@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/cssnano-preset-default/-/cssnano-preset-default-4.0.8.tgz#920622b1fc1e95a34e8838203f1397a504f2d3ff"
@@ -7690,14 +7685,6 @@ istanbul-reports@^3.0.2:
     html-escaper "^2.0.0"
     istanbul-lib-report "^3.0.0"
 
-jest-canvas-mock@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/jest-canvas-mock/-/jest-canvas-mock-2.3.1.tgz#9535d14bc18ccf1493be36ac37dd349928387826"
-  integrity sha512-5FnSZPrX3Q2ZfsbYNE3wqKR3+XorN8qFzDzB5o0golWgt6EOX1+emBnpOc9IAQ+NXFj8Nzm3h7ZdE/9H0ylBcg==
-  dependencies:
-    cssfontparser "^1.2.1"
-    moo-color "^1.0.2"
-
 jest-changed-files@^26.6.2:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-26.6.2.tgz#f6198479e1cc66f22f9ae1e22acaa0b429c042d0"
@@ -8384,18 +8371,10 @@ klona@^2.0.4:
   resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
 
-konva-node@^0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/konva-node/-/konva-node-0.11.2.tgz#d5637e90e18fd6c579e92bfc6ae5b0e7df49128e"
-  integrity sha512-puuzsIT+ykOBRWK6+M6TNyZnhqQKTiIK82GQdeTummog16WB+Fi/98vqMQGP9SIu2wp816lc04uK6TJ82HOuLQ==
-  dependencies:
-    canvas "^2.5.0"
-    konva "^7"
-
-konva@^7, konva@^7.2.5:
-  version "7.2.5"
-  resolved "https://registry.yarnpkg.com/konva/-/konva-7.2.5.tgz#9b4ac3a353e6be66e3e69123bf2a0cbc61efeb26"
-  integrity sha512-yk/li8rUF+09QNlOdkwbEId+QvfATMe/aMGVouWW1oFoUVTYWHsQuIAE6lWy11DK8mLJEJijkNAXC5K+NVlMew==
+konva@^8.3.1:
+  version "8.3.1"
+  resolved "https://registry.yarnpkg.com/konva/-/konva-8.3.1.tgz#9243cbfada641fdda166446c61cbfc1b6bf00217"
+  integrity sha512-9YVM/nKWKTdGppPkhVY+E1FI+brrSmPygPO1qUSH2Dd7q0bgCX8V9DLqOp15myY7Wxmy5JDx9dWdd0fQZpikZw==
 
 language-subtag-registry@~0.3.2:
   version "0.3.21"
@@ -8977,13 +8956,6 @@ moment@^2.29.1:
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
   integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
 
-moo-color@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/moo-color/-/moo-color-1.0.2.tgz#837c40758d2d58763825d1359a84e330531eca64"
-  integrity sha512-5iXz5n9LWQzx/C2WesGFfpE6RLamzdHwsn3KpfzShwbfIqs7stnoEpaNErf/7+3mbxwZ4s8Foq7I0tPxw7BWHg==
-  dependencies:
-    color-name "^1.1.4"
-
 moo@^0.5.0:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/moo/-/moo-0.5.1.tgz#7aae7f384b9b09f620b6abf6f74ebbcd1b65dbc4"