p5 2.2.1-rc.0 → 2.2.1

package/dist/color/setting.js

@@ -1,5 +1,5 @@
-import { a2 as NORMAL, B as BLEND } from '../constants-DEJVKr9Z.js';
-import { R as RGB, b as RGBHDR, H as HSB, d as HSL, e as HWB, L as LAB, f as LCH, O as OKLAB, g as OKLCH } from '../creating_reading-CgHCHxqN.js';
+import { a2 as NORMAL, B as BLEND } from '../constants-DQyACdzq.js';
+import { R as RGB, b as RGBHDR, H as HSB, d as HSL, e as HWB, L as LAB, f as LCH, O as OKLAB, g as OKLCH } from '../creating_reading-ZXzcZEsb.js';
 import 'colorjs.io/fn';
 import './color_spaces/hsb.js';
 
@@ -37,8 +37,6 @@ function setting(p5, fn){
    * @param {Boolean} [options.invert=false] Whether or not to invert the mask.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -55,12 +53,8 @@ function setting(p5, fn){
    *
    *   describe('A white triangle and circle on a gray background.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -77,11 +71,8 @@ function setting(p5, fn){
    *
    *   describe('A white square at the top-left corner of a gray square. The white square has a triangle and a circle cut out of it.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -118,12 +109,8 @@ function setting(p5, fn){
    *
    *   describe('In the top left, a white triangle and circle. In the bottom right, a white square with a triangle and circle cut out of it.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -148,12 +135,8 @@ function setting(p5, fn){
    *   fill('fuchsia');
    *   plane(100);
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -184,8 +167,6 @@ function setting(p5, fn){
    *   vertex(width / 2, height / 2);
    *   endShape();
    * }
-   * </code>
-   * </div>
    */
   fn.beginClip = function(options = {}) {
     this._renderer.beginClip(options);
@@ -198,8 +179,6 @@ function setting(p5, fn){
    * @method endClip
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -216,8 +195,6 @@ function setting(p5, fn){
    *
    *   describe('A white triangle and circle on a gray background.');
    * }
-   * </code>
-   * </div>
    */
   fn.endClip = function() {
     this._renderer.endClip();
@@ -248,8 +225,6 @@ function setting(p5, fn){
    * @param {Boolean} [options.invert=false] Whether or not to invert the mask.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -269,12 +244,8 @@ function setting(p5, fn){
    *   triangle(15, 37, 30, 13, 43, 37);
    *   circle(45, 45, 7);
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -294,11 +265,8 @@ function setting(p5, fn){
    *   triangle(15, 37, 30, 13, 43, 37);
    *   circle(45, 45, 7);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -335,12 +303,8 @@ function setting(p5, fn){
    *   triangle(15, 37, 30, 13, 43, 37);
    *   circle(45, 45, 7);
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -368,12 +332,8 @@ function setting(p5, fn){
    *   torus(30, 15);
    *   pop();
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -407,8 +367,6 @@ function setting(p5, fn){
    *   torus(30, 15);
    *   pop();
    * }
-   * </code>
-   * </div>
    */
   fn.clip = function(callback, options) {
     this._renderer.beginClip(options);
@@ -454,8 +412,6 @@ function setting(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -464,11 +420,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a dark charcoal gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -476,11 +429,8 @@ function setting(p5, fn){
    *   background(51, 0.4);
    *   describe('A canvas with a transparent gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -489,11 +439,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a yellow background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -502,11 +449,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a semi-transparent red background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -518,11 +462,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a royal blue background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -531,11 +472,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a red background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -544,11 +482,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a pink background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -557,11 +492,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a black background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -570,11 +502,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a bright green background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -583,11 +512,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a transparent green background.');
    * }
-   * </code>
-   * </div>
-   *
-   * <div>
-   * <code>
+   * <
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -596,11 +522,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a red background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -609,11 +532,8 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a transparent purple background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -623,11 +543,7 @@ function setting(p5, fn){
    *
    *   describe('A canvas with a blue background.');
    * }
-   * </code>
-   * </div>
-   *
    */
-
   /**
    * @method background
    * @param {String} colorstring color string, possible formats include: integer
@@ -637,14 +553,12 @@ function setting(p5, fn){
    *                             color range (default is 0-255).
    * @chainable
    */
-
   /**
    * @method background
    * @param {Number} gray   specifies a value between white and black.
    * @param {Number} [a]
    * @chainable
    */
-
   /**
    * @method background
    * @param {Number} v1     red value if color mode is RGB, or hue value if color mode is HSB.
@@ -653,14 +567,12 @@ function setting(p5, fn){
    * @param  {Number} [a]
    * @chainable
    */
-
   /**
    * @method background
    * @param  {Number[]}      values  an array containing the red, green, blue
    *                                 and alpha components of the color.
    * @chainable
    */
-
   /**
    * @method background
    * @param {p5.Image} image     image created with <a href="#/p5/loadImage">loadImage()</a>
@@ -693,8 +605,6 @@ function setting(p5, fn){
    * @method clear
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -711,11 +621,8 @@ function setting(p5, fn){
    *   clear();
    *   background(200);
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * let pg;
    *
    * function setup() {
@@ -735,8 +642,6 @@ function setting(p5, fn){
    *   clear();
    *   image(pg, 20, 20);
    * }
-   * </code>
-   * </div>
    *
    * @param {Number} [r] normalized red value.
    * @param {Number} [g] normalized green value.
@@ -827,8 +732,6 @@ function setting(p5, fn){
    * @return {RGB|HSB|HSL|RGBHDR|HWB|LAB|LCH|OKLAB|OKLCH} The current color mode.
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -841,12 +744,8 @@ function setting(p5, fn){
    *
    *   describe('A gray square with a red circle at its center.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -862,12 +761,8 @@ function setting(p5, fn){
    *
    *   describe('A gray square with a red circle at its center.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -883,12 +778,8 @@ function setting(p5, fn){
    *
    *   describe('A gray square with a red circle at its center.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -904,12 +795,8 @@ function setting(p5, fn){
    *
    *   describe('A gray square with a red circle at its center.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -930,12 +817,8 @@ function setting(p5, fn){
    *
    *   describe('A gray square with a red circle at its center, drawn using HWB color mode.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -956,12 +839,8 @@ function setting(p5, fn){
    *
    *   describe('A gray square with a red circle at its center, drawn using LAB color mode.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -981,12 +860,8 @@ function setting(p5, fn){
    *
    *   describe('A gray square with a red circle at its center, drawn using LCH color mode.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1004,11 +879,8 @@ function setting(p5, fn){
    *     'A diagonal green to red gradient from bottom-left to top-right with shading transitioning to black at top-left corner.'
    *   );
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1024,11 +896,8 @@ function setting(p5, fn){
    *
    *   describe('A rainbow gradient from left-to-right. Brightness transitions to white at the top.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1056,11 +925,8 @@ function setting(p5, fn){
    *
    *   describe('A purple canvas with the red, green, and blue decimal values of the color written on it.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1077,12 +943,8 @@ function setting(p5, fn){
    *
    *   describe('Two overlapping translucent pink circle outlines.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * let hslGraphic, lchGraphic, oklchGraphic;
    *
    * function setup() {
@@ -1132,12 +994,8 @@ function setting(p5, fn){
    *   image(lchGraphic, 200, 0);
    *   image(oklchGraphic, 400, 0);
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * // Example: Single-value (Grayscale) colors in different color modes.
    * // The rectangle is filled with one parameter, but its final color depends
    * // on how that parameter is interpreted by the current color mode.
@@ -1161,8 +1019,6 @@ function setting(p5, fn){
    *   textSize(14);
    *   text("RGB (128)", 10, 20);
    * }
-   * </code>
-   * </div>
    */
   /**
    * @method colorMode
@@ -1250,8 +1106,6 @@ function setting(p5, fn){
    * @param  {Number}        [alpha] alpha value, controls transparency (0 - transparent, 255 - opaque).
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1263,11 +1117,8 @@ function setting(p5, fn){
    *
    *   describe('A dark charcoal gray square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1279,11 +1130,8 @@ function setting(p5, fn){
    *
    *   describe('A yellow square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1295,11 +1143,8 @@ function setting(p5, fn){
    *
    *   describe('A semi-transparent red square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1314,11 +1159,8 @@ function setting(p5, fn){
    *
    *   describe('A royal blue square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1330,11 +1172,8 @@ function setting(p5, fn){
    *
    *   describe('A red square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1346,11 +1185,8 @@ function setting(p5, fn){
    *
    *   describe('A pink square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1362,11 +1198,8 @@ function setting(p5, fn){
    *
    *   describe('A purple square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1378,11 +1211,8 @@ function setting(p5, fn){
    *
    *   describe('A bright green square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1394,11 +1224,8 @@ function setting(p5, fn){
    *
    *   describe('A soft green rectange with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1410,11 +1237,8 @@ function setting(p5, fn){
    *
    *   describe('A red square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1426,11 +1250,8 @@ function setting(p5, fn){
    *
    *   describe('A dark fuchsia square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1443,30 +1264,24 @@ function setting(p5, fn){
    *
    *   describe('A blue square with a black outline.');
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method fill
    * @param  {String}        value   a color string.
    * @chainable
    */
-
   /**
    * @method fill
    * @param  {Number}        gray   a grayscale value.
    * @param  {Number}        [alpha]
    * @chainable
    */
-
   /**
    * @method fill
    * @param  {Number[]}      values  an array containing the red, green, blue &
    *                                 and alpha components of the color.
    * @chainable
    */
-
   /**
    * @method fill
    * @param  {p5.Color}      color   the fill color.
@@ -1488,8 +1303,6 @@ function setting(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1504,11 +1317,8 @@ function setting(p5, fn){
    *
    *   describe('A white square on above an empty square. Both squares have black outlines.');
    * }
-   * </code>
-   * </div>
    *
-   * <div modernizr='webgl'>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -1529,8 +1339,6 @@ function setting(p5, fn){
    *   // Draw the box.
    *   box(45);
    * }
-   * </code>
-   * </div>
    */
   fn.noFill = function() {
     this._renderer.noFill();
@@ -1548,8 +1356,6 @@ function setting(p5, fn){
    * @method noStroke
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1560,11 +1366,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with no outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div modernizr='webgl'>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100, WEBGL);
    *
@@ -1585,8 +1388,6 @@ function setting(p5, fn){
    *   // Draw the box.
    *   box(45);
    * }
-   * </code>
-   * </div>
    */
   fn.noStroke = function() {
     this._renderer.states.setValue('strokeColor', null);
@@ -1625,8 +1426,6 @@ function setting(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1639,11 +1438,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a dark charcoal gray outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1656,11 +1452,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a yellow outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1676,11 +1469,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a royal blue outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1693,11 +1483,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a red outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1710,11 +1497,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a pink outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1727,11 +1511,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a black outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1744,11 +1525,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a bright green outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1761,11 +1539,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a soft green outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1778,11 +1553,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a red outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1795,11 +1567,8 @@ function setting(p5, fn){
    *
    *   describe('A white square with a dark fuchsia outline.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1812,30 +1581,24 @@ function setting(p5, fn){
    *
    *   describe('A white square with a blue outline.');
    * }
-   * </code>
-   * </div>
    */
-
   /**
    * @method stroke
    * @param  {String}        value   a color string.
    * @chainable
    */
-
   /**
    * @method stroke
    * @param  {Number}        gray   a grayscale value.
    * @param  {Number}        [alpha]
    * @chainable
    */
-
   /**
    * @method stroke
    * @param  {Number[]}      values  an array containing the red, green, blue,
    *                                 and alpha components of the color.
    * @chainable
    */
-
   /**
    * @method stroke
    * @param  {p5.Color}      color   the stroke color.
@@ -1883,8 +1646,6 @@ function setting(p5, fn){
    * @chainable
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1901,12 +1662,8 @@ function setting(p5, fn){
    *
    *   describe('A purple canvas with a pink square in the middle. A circle is erased from the top-left, leaving a hole.');
    * }
-   * </code>
-   * </div>
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1924,8 +1681,6 @@ function setting(p5, fn){
    *
    *   describe('A purple canvas with a pink square in the middle. A circle at the top-left partially erases its interior and a fully erases its outline.');
    * }
-   * </code>
-   * </div>
    */
   fn.erase = function(opacityFill = 255, opacityStroke = 255) {
     this._renderer.erase(opacityFill, opacityStroke);
@@ -1943,8 +1698,6 @@ function setting(p5, fn){
    * @method noErase
    * @chainable
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -1965,8 +1718,6 @@ function setting(p5, fn){
    *
    *   describe('An orange canvas with two tall blue rectangles. A circular hole in the center erases the rectangle on the left but not the one on the right.');
    * }
-   * </code>
-   * </div>
    */
   fn.noErase = function() {
     this._renderer.noErase();
@@ -2021,8 +1772,6 @@ function setting(p5, fn){
    *                SOFT_LIGHT, DODGE, BURN, ADD, REMOVE or SUBTRACT
    *
    * @example
-   * <div>
-   * <code>
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2044,11 +1793,8 @@ function setting(p5, fn){
    *
    *   describe('A blue line and a red line form an X on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2070,11 +1816,8 @@ function setting(p5, fn){
    *
    *   describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2096,11 +1839,8 @@ function setting(p5, fn){
    *
    *   describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2122,11 +1862,8 @@ function setting(p5, fn){
    *
    *   describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2148,11 +1885,8 @@ function setting(p5, fn){
    *
    *   describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2174,11 +1908,8 @@ function setting(p5, fn){
    *
    *   describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2200,11 +1931,8 @@ function setting(p5, fn){
    *
    *   describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint magenta.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2226,11 +1954,8 @@ function setting(p5, fn){
    *
    *   describe('A diagonal red line.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2252,11 +1977,8 @@ function setting(p5, fn){
    *
    *   describe('The silhouette of an X is missing from a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2278,11 +2000,8 @@ function setting(p5, fn){
    *
    *   describe('A yellow line and a cyan line form an X on a gray background. The area where they overlap is green.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2304,11 +2023,8 @@ function setting(p5, fn){
    *
    *   describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is bright magenta.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2330,11 +2046,8 @@ function setting(p5, fn){
    *
    *   describe('A blue line and a red line form an X on a gray background.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2356,11 +2069,8 @@ function setting(p5, fn){
    *
    *   describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is violet.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2382,11 +2092,8 @@ function setting(p5, fn){
    *
    *   describe('A faint blue line and a faint red line form an X on a gray background. The area where they overlap is faint violet.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2408,11 +2115,8 @@ function setting(p5, fn){
    *
    *   describe('A blue line and a red line form an X on a gray background. The area where they overlap is black.');
    * }
-   * </code>
-   * </div>
    *
-   * <div>
-   * <code>
+   * @example
    * function setup() {
    *   createCanvas(100, 100);
    *
@@ -2434,8 +2138,6 @@ function setting(p5, fn){
    *
    *   describe('A yellow line and a turquoise line form an X on a gray background. The area where they overlap is green.');
    * }
-   * </code>
-   * </div>
    */
   fn.blendMode = function (mode) {
     // p5._validateParameters('blendMode', arguments);