text

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

const canvas = document.querySelector('canvas')
const $ = canvas.getContext('2d')

$.font = 'bold 50px Verdana, sans-serif'
$.shadowColor = '#444'
$.shadowBlur = 2
$.shadowOffsetX = 2
$.shadowOffsetY = 2
$.fillStyle = '#ddd'
$.fillText('CANVAS', 40, 100)

$.shadowColor = 'transparent'
$.lineWidth = 2
$.strokeStyle = '#333'
$.strokeText('CANVAS', 40, 220)