Canvas 2D Gradients

by wlouie1

HTML

<h2>Canvas 2D Linear Gradient</h2>
<canvas id="canvasLinear" width="200" height="50"></canvas>

<h2>Canvas 2D Radial Gradient</h2>
<canvas id="canvasRadial" width="100" height="100"></canvas>

<h2>Canvas 2D Conic Gradient (NEW!)</h2>
<div id="supportText"></div>
<canvas id="canvasConic" width="100" height="100"></canvas>

JavaScript

// Canvas 2D createLinearGradient
const canvasLinear = document.getElementById('canvasLinear');
const ctxLinear = canvasLinear.getContext('2d');
const linearGradient = ctxLinear.createLinearGradient(0, 0, 200, 0);
linearGradient.addColorStop(0, '#3f87a6');
linearGradient.addColorStop(0.5, '#ebf8e1');
linearGradient.addColorStop(1, '#f69d3c');
ctxLinear.fillStyle = linearGradient;
ctxLinear.fillRect(0, 0, 200, 50);

// Canvas 2D createRadialGradient
const canvasRadial = document.getElementById('canvasRadial');
const ctxRadial = canvasRadial.getContext('2d');
const radialGradient = ctxRadial.createRadialGradient(50, 50, 10, 50, 50, 50);
radialGradient.addColorStop(0, '#e66465');
radialGradient.addColorStop(1, '#9198e5');
ctxRadial.fillStyle = radialGradient;
ctxRadial.fillRect(0, 0, 100, 100);

// Canvas 2D createRadialGradient (NEW!)
const canvasConic = document.getElementById('canvasConic');
const ctxConic= canvasConic.getContext('2d');
if (ctxConic.createConicGradient) {
  const conicGradient = ctxConic.createConicGradient(0, 50, 50);
  conicGradient.addColorStop(0, "red");
  conicGradient.addColorStop(0.25, "orange");
  conicGradient.addColorStop(0.5, "yellow");
  conicGradient.addColorStop(0.75, "green");
  conicGradient.addColorStop(1, "blue");
  ctxConic.fillStyle = conicGradient;
	ctxConic.fillRect(0, 0, 100, 100);
} else {
  const message = document.getElementById('supportText');
  message.textContent = 'Your browser currently does not support createConicGradient()';
}