Reference Canvas in HTML
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() |
Update 10 May 2022
You should read it
- How to use the NVIDIA Canvas app
- Canvas element in HTML5
- 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
- Firefox offers the same security features as the Tor browser
- 'Super lovely' palm tree cloth bag
- VAIO officially comes back with a unique 'framed' tablet hybrid laptop
- Understand the business model in just 2 minutes - Business Model Canvas
- How to edit photos on Google Images
Maybe you are interested
DNS Tricks to Access More Content on Smart TV Breakthrough new material increases solar panel efficiency and longevity How to Use Smart DNS Proxy to Access Geo-Restricted Content How to fix error Gsdll32.dll Not Found Learn about the Cross-Site Request Forgery attack method Albert Einstein exchanged happiness to become a world genius!