diff --git a/frontend/static/js/views/PongOfflineView.js b/frontend/static/js/views/PongOfflineView.js
index 65d9902..c773a1f 100644
--- a/frontend/static/js/views/PongOfflineView.js
+++ b/frontend/static/js/views/PongOfflineView.js
@@ -70,6 +70,7 @@ export class PongOfflineView extends AbstractAuthenticatedView {
 			this.game_mode = 1;
 			document.getElementById("gameMode").innerText = "Switch to 3D";
 		}
+		this.game.changeGameMode(this.game_mode);
 	}
 
 	startTournament() {
@@ -326,23 +327,29 @@ class Game {
 		this.cam_pos = [0, 400, 0];
 		this.cam_target = [0, 0, 0];
 		this.cam_up = [0, 0, -1];
+
+		this.initGame(1);
 	}
 
-	initGame()
+	initGame(mode)
 	{
+		if(mode === 1)
+			this.init2D();
+		else if(mode === 2)
+			this.initWebGL();
 	}
 
 	initWebGL()
 	{
 		this.canvas = document.createElement("canvas");
-		this.canvas.height = this.game.config.MAP_SIZE_X;
-		this.canvas.width = this.game.config.MAP_SIZE_Y;
+		this.canvas.height = this.config.MAP_SIZE_X;
+		this.canvas.width = this.config.MAP_SIZE_Y;
 		this.canvas.id = "gameCanvas";
 		this.app.appendChild(this.canvas);
 
 		this.context = canva.getContext("webgl");
 
-		if(this.ctx === null)
+		if(this.context === null)
 		{
 			alert("Unable to initialize WebGL. Your browser or machine may not support it. You may also be a bozo");
 			return;
@@ -367,6 +374,12 @@ class Game {
 		this.app.appendChild(this.canvas);
 	}
 
+	changeGameMode(mode)
+	{
+		this.app.removeChild(this.canvas);
+		this.initGame(mode);
+	}
+
 	finish(winner) {
 		this.cleanup();
 		if (this.pong.round >= 0) {
@@ -450,11 +463,11 @@ class Game {
 			this.ball.y += this.ball.vy;
 		}
 
-		if(this.ctx instanceof CanvasRenderingContext2D)
+		if(this.context instanceof CanvasRenderingContext2D)
 		{
 			this.clear();
 		}
-		else if(this.ctx instanceof WebGLRenderingContext)
+		else if(this.context instanceof WebGLRenderingContext)
 		{
 			this.context.clearColor(0.1, 0.1, 0.1, 1.0);
 			this.context.clearDepth(1.0);
@@ -590,12 +603,12 @@ class Paddle {
 	}
 
 	update(ctx) {
-		if(this.ctx instanceof CanvasRenderingContext2D)
+		if(ctx instanceof CanvasRenderingContext2D)
 		{
 			ctx.fillStyle = 'black';
 			ctx.fillRect(this.x, this.y, this.width, this.height);
 		}
-		else if(this.ctx instanceof WebGLRenderingContext)
+		else if(ctx instanceof WebGLRenderingContext)
 		{
 		//	const size = this.game.config.BALL_SIZE * 2;
 		//	const sizex = this.len() / 2;
@@ -628,14 +641,14 @@ class Ball {
 	}
 
 	update(ctx) {
-		if(this.ctx instanceof CanvasRenderingContext2D)
+		if(ctx instanceof CanvasRenderingContext2D)
 		{
 			ctx.fillStyle = 'black';
 			ctx.beginPath();
 			ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
 			ctx.fill();
 		}
-		else if(this.ctx instanceof WebGLRenderingContext)
+		else if(ctx instanceof WebGLRenderingContext)
 		{
 			//const size = this.size * 3;
 			//const posx = (this.position.location.x - this.size / 2) - this.game.config.MAP_SIZE_X / 2;