Colors, styles and shadows
| Properties |
Describe |
| fillStyle |
Set/return the color, gradient or pattern used to fill the drawing |
| strokeStyle |
Set/return the color, gradient or pattern used for the strokes |
| shadowColor |
Set/return the color to use for the drop shadow |
| shadowBlur |
Set/return opacity level for shadow |
| shadowOffsetX |
Set/return horizontal distance of shadow from shape |
| shadowOffsetY |
Set/return the vertical distance of the shadow from the shape |
| Method |
Describe |
| createLinearGradient() |
Create a linear gradient (for use on canvas content) |
| createPattern() |
Iterate over a specified element in the specified direction |
| createRadialGradient() |
Create a radial/circular gradient (for use on canvas content) |
| addColorStop() |
Specify color and stop position in a gradient object |
Line style
| Properties |
Describe |
| lineCap |
Set/return the style of the bullets for a line |
| lineJoin |
Set/return the type of angle generated, when two lines meet |
| lineWidth |
Set/return current line width |
| miterLimit |
Set/return the maximum miter length |
Rectangle
| Method |
Describe |
| rect() |
Create a rectangle |
| fillRect() |
Draw a rectangle "with fill" |
| strokeRect() |
Draw a rectangle (no fill) |
| clearRect() |
Remove specified pixels within a given rectangle |
Calibration curve
| Method |
Describe |
| fill() |
Fill in the current drawing (standard line) |
| stroke() |
Draw the standard curve you have determined in practice |
| beginPath() |
Start a calibration curve or reset the current calibration curve |
| moveTo() |
Move the reference line to the specified point in the canvas without creating the line |
| closePath() |
Create a reference line from the current point back to the starting point |
| lineTo() |
Add a new point and create a line to it from the last specified point in the canvas |
| clip() |
Crop an area of any shape and size from the original canvas |
| quadraticCurveTo() |
Creating quadratic Bézier curves |
| bezierCurveTo() |
Creating a cubic Bézier curve |
| arc() |
Create an arc/curve (used to create circles or sections of circles) |
| arcTo() |
Create an arc/curve between two tangents |
| isPointInPath() |
Returns true if the specified point is within the current calibration curve, false otherwise |
Change
| Method |
Describe |
| scale() |
Scale the current drawing larger or smaller |
| rotate() |
Rotate current drawing |
| translate() |
Fix position (0,0) on canvas |
| transform() |
Substitute the current transformation matrix for the drawing |
| setTransform() |
Reset transforms the current into an identity matrix. Then run transform() |
Document
| Properties |
Describe |
| font |
Set/return current font properties for body text |
| textAlign |
Set/return current alignment of body text |
| textBaseline |
Set/return the current text baseline used when drawing text |
| Method |
Describe |
| fillText() |
Draw the word "with color" on the canvas |
| strokeText() |
Draw text on canvas (no fill color) |
| measureText() |
Returns an object containing the specified text width |
Draw pictures
| Method |
Describe |
| drawImage() |
Draw an image, canvas or video onto the canvas |
Pixel manipulation
| Properties |
Describe |
| width |
Returns the width of the ImageData . object |
| Cao |
Returns the height of the ImageData . object |
| data |
Returns an object containing the image data of the specified ImageData object |
| Method |
Describe |
| createImageData() |
Create a new, empty ImageData object |
| getImageData() |
Returns an ImageData object that copies the pixel data for the specified rectangle on the canvas |
| putImageData() |
Set image data (from a specified ImageData object) back to canvas |
Compositing
| Properties |
Describe |
| globalAlpha |
Set/return the current alpha or transparency value of the drawing |
| globalCompositeOperation |
Set/return how a new image is drawn over an existing image |
Other
| Method |
Describe |
| save() |
Save the state of the current context |
| restore() |
Returns the state and properties of the previously saved calibration curve |
| createEvent() |
|
| getContext() |
|
| toDataURL() |
|
Home
Wifi Tips
Fix Computer
Windows 10
Windows 11
Artificial Intelligence
Space Science
Strange story
