In JavaScript, there are many ways to color and shape.

ellipse()

Description

Ellipse is a function that draws an oval on the canvas. There are four parameters within the ellipse function. The first and second parameters will set the location of the ellipse center (x, y). The third and fourth parameters will set the size/shape of the ellipse (w, h), which means the width and height of the ellipse. You can also add another parameter that's called "detail", which is the number of radial sectors to draw (for WebGL mode).

↓↓ Here's a demonstration of a colored ellipse ↓↓

Syntax

ellipse(x, y, w, h)

ellipse(x, y, w, h, detail)

fill()

Description

Fill shapes with color by using the fill function. The fill function supports all types of color objects. Objects such as RGB, RGBA, HEX CSS color are all supported. By default, the color object is RGB, which means that each value must be in the range from 0 to 255.

↓↓ Here's a demonstration of the color from 0 ~ 255 ↓↓

Syntax

fill(value)

fill(values)

fill(color)