---
layout: example.html
title: Styling feature with CanvasGradient or CanvasPattern
shortdesc: Example showing a vector layer styled with a gradient.
docs: >
  This example creates a [`CanvasGradient`](https://developer.mozilla.org/en/docs/Web/API/CanvasGradient).
  The vector data is loaded from a file and features are filled with the gradient.
  The same technique can be used with a [`CanvasPattern`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasPattern).
tags: "canvas, gradient, pattern, style"
---
<div id="map" class="map"></div>