<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

canvasW = canvas.width;
canvasH = canvas.height;

//線形グラデーション
ctx.beginPath();
let linearGradient = ctx.createLinearGradient(canvasW / 4, canvasH / 2, canvasW / 4, canvasH / 2 + 200);//グラデーションを描画する座標と方向を指定
linearGradient.addColorStop(0.0,'red');//グラデーションさせる色を位置を指定(0%の位置に赤)
linearGradient.addColorStop(1.0, 'blue');//グラデーションさせる色を位置を指定(100%の位置に青)
ctx.fillStyle = linearGradient;//グラデーション描画の指示を出す
ctx.fillRect(canvasW /5, canvasH / 2, 300, 200);
ctx.fill();
ctx.closePath();

//円形グラデーション
ctx.beginPath();
let radialGradient = ctx.createRadialGradient(canvasW / 2, canvasH / 2, 20, canvasW / 2, canvasH / 2, 100);//グラデーションを開始する円・終了する円の中心座標と半径を指定
radialGradient.addColorStop(0.0, 'red');//0%位置(中心)に赤を追加
radialGradient.addColorStop(1.0, 'blue');//100%位置(外側)に青を追加
ctx.fillStyle = radialGradient;
ctx.arc(canvasW / 2, canvasH / 2, 100, 0, Math.PI * 2, false);
ctx.fill();
ctx.closePath();