Skip to main content

Canvas fill styles

An example of using complex fill styles on the canvas.

import canvasDatagrid from 'canvas-datagrid';
import data from '/data.json';

const app = document.getElementById('app');
const gridElement = document.createElement('div');
const grid = canvasDatagrid({
  parentNode: gridElement,
  data,
});
const gradient = grid.ctx.createLinearGradient(0, 0, 1300, 1300);

gradient.addColorStop(0, 'dodgerblue');
gradient.addColorStop(1, 'chartreuse');
grid.style.cellBackgroundColor = gradient;
grid.style.gridBackgroundColor = gradient;

app.append(gridElement);