Reference Canvas in HTML
The HTML canvas tag is used to draw graphics on the fly, via scripting (usually JavaScript). To learn more about canvas, please read the HTML Canvas tutorial.
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() |
Discover more
Canvas Canvas in html
Share by
Marvin Fry
Update 10 May 2022
You should read it
- Mobile canvas house - Video instruction for removing canvas frame
- Instructions to turn off the Spotify Canvas feature
- SVG element in HTML5
- How to Clean Old Paintings on Canvas
- How to use Chrome Canvas to paint on a browser
- The Quiet Details That Make a Sports Betting Platform Feel Reliable
- Instructions on creating toy set images with ChatGPT AI
- How are AI agents changing the journalism industry?
- 6 reasons to use Docker virtualization software
- How to use the UNIQUE function in Google Sheets
- Why do airplanes almost never have a flat tire?