LinearGradientBrush.applyToCanvas

Syntax

applyToCanvas(ctx: CanvasRenderingContext2D);

Parameters

ctx. Rendering context.

Description

The applyToCanvas method applies the linear gradient fill brush to the specified canvas.

Example

To execute the example, the HTML page must contain links to the PP.js scenario file and the PP.css styles file. Create a canvas and apply linear gradient fill for it:

   // Create a div element
   var container= PP.createElement(document.body);
   // Create linear gradient fill
   var gradientSettings = {
       GradientType: 0
   }
   var gradientBrush = new PP.LinearGradientBrush(gradientSettings);
   // Set gradient transition points
   var stop1 = new PP.GradientStop({
       Color: "#e6e6fa",
       Offset: 0.2
   });
   var stop2 = new PP.GradientStop({
       Color: "#abdaff"
   });
   gradientBrush.setGradientStops([stop1, stop2]);
   // Set start and end relative points of gradient
   var startPoint = new PP.Point({
       X: 0,
       Y: 0
   });
   var endPoint = new PP.Point({
       X: 3,
       Y: 3
   });
   gradientBrush.setStartPoint(startPoint);
   gradientBrush.setEndPoint(endPoint);
   // Create a canvas
   var settings = {
       Width: 100,
       Height: 100
   }
   var canvas = new PP.Ui.Canvas(settings);
   canvas.setLeft(5);
   canvas.setTop(5);
   // Apply brush settings for the canvas
   gradientBrush.applyToCanvas(canvas.getContext());
   canvas.addToNode(container)
   // Render a circle on the canvas
   canvas.drawCircle(50, 50, 40, True, True);
   canvas.flush();

As a result a brush with linear gradient fill is set for the canvas: