JavaScript Canvas – Gradient and Pattern Fills


Page 1 of 3

Fills can be more than just color. In this excerpt from Ian Elliot’s book on JavaScript graphics, we take a look at how to use gradients and pattern fills.

Now available as a paperback or ebook on Amazon.

JavaScript bitmap graphics
With Canvas


  1. JavaScript graphics
  2. Getting started with Canvas
  3. Plot paths
    Extract: Basic paths
    Extract: Bézier curves
  4. Outline and fill
    Extract: Line properties
    Extract: Filling and holes
  5. Transformations
    Extract: Transformations
    Extract: Personalized contact details
    Extract the state of the graphics **NEW!
  6. Text
    Extract: Text, Typography & SVG
    Extract: Unicode
  7. Cutting, composition and effects
    Extract: Clipping & Basic Compositing
  8. Generating bitmaps
    Extract: Introduction to bitmaps
    Extract: Animation
  9. WebWorkers & OffscreenCanvas
    Extract: OffscreenCanvas
  10. Bit manipulation in JavaScript
    Extract: Bit manipulation
  11. Typed arrays
  12. Files, blobs, urls and fetch
    Extract: Blobs and files
    Extract: Read / write local files
  13. Image processing
    Extract: ImageData
    Extract: The Filter API
  14. WebGL 3D
  15. 2D WebGL
    Extract: WebGL Convolutions

In the chapter but not in this excerpt

  • Color
  • Alpha
  • Line and fill color
  • Line properties
  • Anti aliasing
  • Fill, outline and painter’s algorithm
  • Holes and filling

Gradient fills

In addition to solid colors, you can also define fills which are gradients between a range of colors in linear and radial configurations. Although these are described here as fills, they can be applied to fillStyle or strokeStyle.

A linear gradient is created using:

var grad=ctx.createLinearGradient(x1,y1,x2,y2);

where x1, y1 and x2, y2 are the start and end points of the gradient line. The gradient line gives the angle at which the gradient is located and the distance over which the colors change. To specify the actual colors involved, you must define any number of color stops:


where color specifies the color and p the proportion along the gradient line in which the color is applied, i.e. 0 is the start point, 1 is the end point and 0.5 is the midpoint .

For example:

var gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'red');

defines a gradient starting at 0.0 and ending at 400.0. The color at 0.0 is green and at 400.0 is red. Note that the gradient is defined relative to the global coordinate system and not relative to a path to which you might apply it. As a demonstration, consider drawing a set of rectangles each offset in the x direction:

var path1 = new Path2D();
path1.rect(0, 0, 400, 100);
path1.rect(100, 110, 400, 100);
path1.rect(200, 220, 400, 100);
path1.rect(300, 330, 400, 100);
path1.rect(400, 440, 400, 100);
var gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, 'green');
gradient.addColorStop(1, 'red');
ctx.fillStyle = gradient;

Note that only the first rectangle is filled with the full gradient. The final rectangle is just red because it is beyond the end point of the gradient.

Fill1 You can think of this as setting a gradient across the entire canvas and whatever you fill in gets the part of the gradient in its location.

Setting more than one color breakpoint facilitates some special effects. For example:

var path1 = new Path2D();
path1.rect(0, 0, 400, 100);
var gradient = ctx.createLinearGradient(0, 0, 400, 0);
gradient.addColorStop(0, 'darkred');
gradient.addColorStop(0.08, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(0.92, 'red');
gradient.addColorStop(1, 'darkred');
ctx.fillStyle = gradient;

creates the illusion of a curved surface with light coming in from the front:


Note that you can increase the speed at which a color falls by adding more color breakpoints. For example, to widen the white area in the middle of the rectangle, just use two white colored stops:

gradient.addColorStop(0, 'darkred');
gradient.addColorStop(0.08, 'red');
gradient.addColorStop(0.4, 'white');
gradient.addColorStop(0.6, 'white');
gradient.addColorStop(0.92, 'red');
gradient.addColorStop(1, 'darkred');


Source link

Leave A Reply

Your email address will not be published.