diff --git a/source b/source
index 82d29604dcc..1f2dd2a3afa 100644
--- a/source
+++ b/source
@@ -3388,6 +3388,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://drafts.csswg.org/css-images/#intrinsic-height">intrinsic height</dfn></li>
      <li><dfn data-x-href="https://drafts.csswg.org/css-images/#intrinsic-width">intrinsic width</dfn></li>
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-images-3/#the-image-orientation">'image-orientation'</dfn> property</li>
+     <li><dfn data-x-href="https://drafts.csswg.org/css-images-4/#funcdef-conic-gradient">'conic-gradient'</dfn></li>
      <li>The <dfn data-x-href="https://drafts.csswg.org/css-images/#the-object-fit">'object-fit'</dfn> property</li>
     </ul>
 
@@ -60353,6 +60354,7 @@ interface mixin <dfn>CanvasFillStrokeStyles</dfn> {
   attribute (DOMString or CanvasGradient or CanvasPattern) <span data-x="dom-context-2d-fillStyle">fillStyle</span>; // (default black)
   <span>CanvasGradient</span> <span data-x="dom-context-2d-createLinearGradient">createLinearGradient</span>(double x0, double y0, double x1, double y1);
   <span>CanvasGradient</span> <span data-x="dom-context-2d-createRadialGradient">createRadialGradient</span>(double x0, double y0, double r0, double x1, double y1, double r1);
+  <span>CanvasGradient</span> <span data-x="dom-context-2d-createConicGradient">createConicGradient</span>(double startAngle, double x, double y);
   <span>CanvasPattern</span>? <span data-x="dom-context-2d-createPattern">createPattern</span>(<span>CanvasImageSource</span> image, [<span>LegacyNullToEmptyString</span>] DOMString repetition);
 <!--
   // v8 we received one request from Ralf Richard G&oml;bel for a new kind of pattern: a hatch.
@@ -63308,8 +63310,8 @@ try {
 
   <hr>
 
-  <p>There are two types of gradients, linear gradients and radial gradients, both represented by
-  objects implementing the opaque <code>CanvasGradient</code> interface.</p>
+  <p>There are three types of gradients, linear gradients, radial gradients, and conic gradients,
+  represented by objects implementing the opaque <code>CanvasGradient</code> interface.</p>
 
   <p id="interpolation">Once a gradient has been created (see below), stops are placed along it to
   define how the colors are distributed along the gradient. <span w-nodev>The color of the
@@ -63350,6 +63352,11 @@ try {
     <p>If either of the radii are negative, throws an
     <span>"<code>IndexSizeError</code>"</span> <code>DOMException</code> exception.</p>
    </dd>
+
+   <dt><var>gradient</var> = <var>context</var> . <code subdfn data-x="dom-context-2d-createConicGradient">createConicGradient</code>(<var>startAngle</var>, <var>x</var>, <var>y</var>)</dt>
+
+   <dd><p>Returns a <code>CanvasGradient</code> object that represents a conic gradient that paints
+   clockwise along the rotation around the center represented by the arguments.</p></dd>
   </dl>
 
   <div w-nodev>
@@ -63387,7 +63394,6 @@ try {
    </li>
   </ol>
 
-
   <p>The <dfn method for="CanvasFillStrokeStyles"><code
   data-x="dom-context-2d-createLinearGradient">createLinearGradient(<var>x0</var>, <var>y0</var>,
   <var>x1</var>, <var>y1</var>)</code></dfn> method takes four arguments that represent the start
@@ -63448,6 +63454,27 @@ try {
   <p>The resulting radial gradient must then be transformed as described by the <span
   data-x="dom-context-2d-transformation">current transformation matrix</span> when rendering.</p>
 
+  <p>The <dfn method for="CanvasFillStrokeStyles"><code
+  data-x="dom-context-2d-createConicGradient">createConicGradient(<var>startAngle</var>,
+  <var>x</var>, <var>y</var>)</code></dfn> method takes three arguments, the first argument,
+  <var>startAngle</var>, represents the angle in radians at which the gradient begins, and the last
+  two arguments, (<var>x</var>, <var>y</var>), represent the center of the gradient in <span
+  data-x="'px'">CSS pixels</span>. The method, when invoked, must return a conic
+  <code>CanvasGradient</code> initialized with the specified center and angle.</p>
+
+  <p>It follows the same rendering rule as CSS <span>'conic-gradient'</span> and it is
+  equivalent to CSS 'conic-gradient(from <var>adjustedStartAngle</var>rad at
+  <var>x</var>px <var>y</var>px, <var>angularColorStopList</var>)'. Here:</p>
+
+  <ul>
+   <li><p><var>adjustedStartAngle</var> is given by <var>startAngle</var> + π/2;</p></li>
+
+   <li><p><var>angularColorStopList</var> is given by the color stops that have been added to the
+   <code>CanvasGradient</code> using <code
+   data-x="dom-canvasgradient-addColorStop">addColorStop()</code>, with the color stop offsets
+   interpreted as percentages.</p></li>
+  </ul>
+
   <p>Gradients must be painted only where the relevant stroking or filling effects requires that
   they be drawn.</p>