canvasLib

2017
JavaScript

Framework-less web was the first place I learned to code (i.e. raw HTML, CSS, JS). Eventually (late 2015) I discovered the HTML Canvas element which instantly opened up a whole new area of what was possible as I had access to drawing graphics primitives like lines and polygons onto a bitmap.

At a certain point I had made so many canvas-powered web apps that I had actually been reusing a library I'd written called canvasLib which provided an abstraction layer between the simulation and primitive canvas drawing methods (e.g. lines, polygons, circles).

Part of this library included a Button object that greatly simplified the process of creating interactive buttons. Turns out buttons are actually a lot more involved that you might first think (at least they seemed when I first learned to code) and require numerous pieces including but not limited to:

  • Drawing coloured rectangular body of specified dimensions
  • Drawing coloured border of specified width
  • Detecting mouse inside button
    • Need to check if mouse coordinates fall inside Button rectangle
  • Changing button colour when mouse hovers inside Button
    • This means you need to perform the hover calculation every time cursor moves
  • Executing button handler when clicked
    • A "click" should only be triggered on a mouse UP event while cursor was inside the button
    • If mouse UP event occurs inside button, but mouse DOWN occurred outside, button should not "click" (although apparently I forgot to do this)
  • Rendering centered text inside button
    • Font size needs to scale with size of button

The library included other elements I found myself using including sliders, scroll wheels, and even line graphs. Each of which have their own nuances that you only realise when you force yourself to code them from scratch.

So I guess to anyone learning to code I'd recommend coding your own UI library of sorts on an as-need basis. It helps demystify a layer that is often abstracted away from programmers, as generally when any interactive UI is needed, beginners will jump straight to a high level UI framework like HTML or Unity.

It also makes all future projects that use the library feel much more "you" as you get full control over a really important and often fiddly/annoying layer of the stack. And enjoying yourself is super important in that first year or two of learning to code in order to overcome the initial learning curve.