This post is my exploration of static WebGL canvas elements in an webpage. I may periodically update this as and when I get a chance to experiment with new ideas. The source code for this page is available here.

To start with, the following is a simple canvas that generates a “particles” effect when mouse pointer moves over the canvas. Inspired by this tutorial on youtube: Introduction to Canvas API ft. Shruti Kapoor | JS Drops

Appendix: Enabling HTML elements in a Hugo Site Link to heading

As this is a Hugo site, the pages are written in Markdown format. By default, HTML elements are ignored by the builder. To have elements like a canvas, HTML rendering needs to be enabled by adding the following to hugo.toml:

[markup.goldmark.renderer]
unsafe = true

This is safe to do, as long as you know and trust the people working on the website.

With this basic tweak, HTML elements are parsed, including linked CSS or JS files. To make lnking scripts and stylesheets elegant, a Hugo template can be modified to include these in the frontmatter of a page. For example, a yaml frontmatter linking multiple scripts and stylesheets could look like:

---
date: 2024-12-02
author: Firstname Lastname
title: My Awesome Post
type: posts
scripts:
  - script1.js
  - script2.js
stylesheets:
  - sheet1.css
  - sheet1.css
---

If something like this is not supported by your Hugo template, you could add partial layout templates to override your template defaults. For example, with the Hugo Coder template, you could enable the above frontmatter feature by:

  1. Copying themes/hugo-coder/layouts/partials/head.html into layouts/partials/head.html.
  2. Adding the following at the end of layouts/partials/head.html:
{{ range .Params.stylesheets }}
<link rel="stylesheet" href="{{ . }}">
{{ end }}
  1. Copying themes/hugo-coder/layouts/partials/body/extensions.html into layouts/partials/body/extensions.html.
  2. Adding the following in layouts/partials/body/extensions.html:
{{ range .Params.scripts }}
<script src="{{ . }}"></script>
{{ end }}