gradients

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')

let gradient = $.createLinearGradient(0, 0, 140, 140)
gradient.addColorStop(0, 'lightyellow')
gradient.addColorStop(1, 'darkorange')

$.rect(10, 10, 140, 140)
$.fillStyle = gradient
$.fill()
$.stroke()

$.beginPath()
$.arc(215, 215, 80, 0, (2 * Math.PI))
// x0, y0, r0, x1, y1, r1
gradient = $.createRadialGradient(160, 160, 30, 215, 215, 110)
gradient.addColorStop(0, 'lightyellow')
gradient.addColorStop(1, 'darkorange')
$.fillStyle = gradient
$.fill()
$.stroke()