gradient image generator

by not important

HTML

<canvas id="myPrettyCanvas" width="1" height="200"></canvas>
<img id="imgExport">

CSS

canvas {
    display: none;
}

JavaScript

var canvasId = 'myPrettyCanvas',
  canvas = document.getElementById(canvasId),
  ctx = canvas.getContext('2d'),
  grd;

// Create gradient
grd = ctx.createLinearGradient(0, 0, 0, 200);

// Add colors
grd.addColorStop(0, '#1c1c1c');
grd.addColorStop(0.17, '#274851');
grd.addColorStop(1, '#274851');

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 1, 200);

var img = document.getElementById('imgExport');
img.src = canvas.toDataURL();