7 Segment Display

by TheTastefulToastie

HTML

<canvas width="640" height="480"></canvas>

JavaScript

let counter = 0, canvas = document.getElementsByTagName('canvas')[0], context = canvas.getContext('2d')

function renderFrame() {
	// Clear background
	context.fillStyle = '#333'
	context.fillRect(0, 0, canvas.width, canvas.height)
  
  // Draw numbers
  context.fillStyle = '#f0f'
  renderNumber(9876543210, /* x */458, /* y */100, /* width */30, /* height */ 60, /* thickness */ 6, /* spacing */ 5)
  renderNumber(counter++ , /* x */500, /* y */240, /* width */80, /* height */160, /* thickness */16, /* spacing */12)
  
  // Continue animation
  requestAnimationFrame(renderFrame)
}

/*
 * Use a cascading switch statement to exploit the fact that some numbers can be drawn with a combination of other numbers.
 */
function renderNumber(num, x, y, w, h, t, spacing) {
  for (; num; num /= 10, num >>>= 0, x -= w + spacing) {
  	let digit = num % 10;
    switch (digit) {
      case 8:
        context.fillRect(x        , y + h * .5 + t * .5, t        , h * .5 - t * 1.5) // Bottom-left
      case 9:
        context.fillRect(x + t    , y                  , w - t * 2, t               ) // Top
        context.fillRect(x + t    , y + h - t          , w - t * 2, t               ) // Bottom
      case 3:
      	if (digit !== 4)
          context.fillRect(x + t    , y                  , w - t * 2, t               ) // Top
        context.fillRect(x + w - t, y + t              , t        , h * .5 - t * 1.5) // Top-right
        context.fillRect(x + t    , y + h * .5 - t * .5, w - t * 2, t               ) // Middle
        context.fillRect(x + t    , y + h - t          , w - t * 2, t               ) // Bottom
        context.fillRect(x + w - t, y + h * .5 + t * .5, t        , h * .5 - t * 1.5) // Bottom-right
      case 4:
        if (digit !== 3)
          context.fillRect(x        , y + t              , t        , h * .5 - t * 1.5) // Top-left
        context.fillRect(x + w - t, y + t              , t        , h * .5 - t * 1.5) // Top-right
        context.fillRect(x + t    , y + h...