diff --git a/app/assets/javascripts/monotile/hat.js b/app/assets/javascripts/monotile/hat.js
index 01779dd22..978728195 100644
--- a/app/assets/javascripts/monotile/hat.js
+++ b/app/assets/javascripts/monotile/hat.js
@@ -6,7 +6,23 @@
// useful in combination with turbolinks.
// see more here:
// https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup
-new p5();
+
+// A bit of a "hacky" fix. This is the only way I found that works
+// so that the canvas is loaded even if the site is left
+// e.g. user clicks on "Register" or changes language from "De" to "En"
+// with the button on the landing page.
+$(document).on('turbolinks:load', () => {
+ try {
+ setup();
+ } catch (err) {
+ if (err instanceof ReferenceError) {
+ console.log('Setup P5.js');
+ return;
+ }
+ console.error(err);
+ }
+});
+
const INITIAL_TO_SCREEN = [20, 0, 0, 0, -20, 0];
let to_screen = INITIAL_TO_SCREEN;
diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb
index eddba5ba3..8c6c698aa 100644
--- a/app/views/layouts/devise.html.erb
+++ b/app/views/layouts/devise.html.erb
@@ -14,9 +14,9 @@
-
- <%= javascript_include_tag 'monotile/geometry', defer: true %>
- <%= javascript_include_tag 'monotile/hat', defer: true %>
+
+ <%= javascript_include_tag 'monotile/geometry' %>
+ <%= javascript_include_tag 'monotile/hat' %>