Canvas 2D Text Modifiers

by wlouie1

HTML

<h1>Canvas 2D Text Modifiers (NEW!)</h1>
<canvas id="canvas" width="600" height="400"></canvas>

JavaScript

const textModifiers = {
  textLetterSpacing: '5',
  textWordSpacing: '10',
  fontVariant: 'small-caps',
  fontVariantCaps: 'small-caps',
  fontKerning: 'none',
  fontStretch: 'condensed',
  textDecoration: 'green wavy underline',
  textUnderlinePosition: 'under',
  textRendering: 'optimizeSpeed'
};

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.font = "20px sans-serif";

let y = 0;
Object.entries(textModifiers).forEach(([key, value], i) => {
  y = (i + 1) * 30;
  if (ctx[key] != null) {
    ctx.fillStyle = 'green';
    ctx.fillText('\u2713', 0, y);
  } else {
    ctx.fillStyle = 'red';
    ctx.fillText('\u00D7', 0, y);
  }
  ctx.fillStyle = 'black';
  ctx.fillText(`${key}:`, 20, y);
  
  ctx.save();
  ctx[key] = value;
  ctx.fillText('AVA likes cookies!', canvas.width / 2, y);
  ctx.restore();
});

// legend
ctx.fillStyle = 'green';
ctx.fillText('\u2713 = Supported by your browser', 0, y + 50);
ctx.fillStyle = 'red';
ctx.fillText('\u00D7 = Not Supported by your browser yet', 0, y + 80);