{"id":9287,"date":"2022-10-06T04:34:04","date_gmt":"2022-10-06T04:34:04","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=9287"},"modified":"2022-10-06T04:34:04","modified_gmt":"2022-10-06T04:34:04","slug":"canvas-reference","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/10\/06\/canvas-reference\/","title":{"rendered":"Canvas Reference"},"content":{"rendered":"\n

The HTML5\u00a0<canvas>\u00a0element is used for drawing graphics via scripting (commonly\u00a0JavaScript). But the <canvas> element does not have drawing opportunities on its own. To draw the graphics, you must use a script because the <canvas> element is only a container for graphics.<\/p>\n\n\n\n

The getContext() method returns an object which presents properties and methods for drawing on the canvas.<\/p>\n\n\n\n

Colors, Styles, and Shadows<\/h2>\n\n\n\n
Property<\/th>Description<\/th><\/tr><\/thead>
fillStyle<\/td>Sets or returns the color, gradient, or pattern used to fill the shapes.<\/td><\/tr>
strokeStyle<\/td>Sets or returns the color, gradient, or pattern used for the lines around the shapes.<\/td><\/tr>
shadowColor<\/td>Sets or returns the color of the shadows.<\/td><\/tr>
shadowBlur<\/td>Sets or returns the blur level of the shadows.<\/td><\/tr>
shadowOffsetX<\/td>Sets or returns the x offset of the shadow.<\/td><\/tr>
shadowOffsetY<\/td>Sets or returns the y offset of the shadow.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
createLinearGradient()<\/td>Creates a linear gradient for using on the canvas content.<\/td><\/tr>
createPattern()<\/td>Repeats a particular element in the specified direction.<\/td><\/tr>
createRadialGradient()<\/td>Creates a circular\/radial gradient for using on the canvas content.<\/td><\/tr>
addColorStop()<\/td>Defines colors and stop positions in the gradient object.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Line Styles<\/h2>\n\n\n\n
Property<\/th>Description<\/th><\/tr><\/thead>
lineCap<\/td>Sets or returns the style of the line\u2019s end caps.<\/td><\/tr>
lineJoin<\/td>Sets or returns the type of drawn corners.<\/td><\/tr>
lineWidth<\/td>Sets or returns the width of the current line.<\/td><\/tr>
miterLimit<\/td>Sets or returns the maximum miter length.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Rectangles<\/h2>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
rect()<\/td>Creates rectangles.<\/td><\/tr>
fillRect()<\/td>Draws filled rectangles.<\/td><\/tr>
strokeRect()<\/td>Draws rectangular outlines.<\/td><\/tr>
clearRect()<\/td>Clears the specified pixels within a particular rectangle.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Paths<\/h2>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
fill()<\/td>Fills the path to the canvas.<\/td><\/tr>
stroke()<\/td>Draws the defined path.<\/td><\/tr>
beginPath()<\/td>Begins a new path or resets the current path.<\/td><\/tr>
moveTo()<\/td>Moves the path to the defined point in the canvas without drawing a line.<\/td><\/tr>
closePath()<\/td>Adds a path from the current point back to the start point.<\/td><\/tr>
lineTo()<\/td>Adds a line to the current sub-path.<\/td><\/tr>
clip()<\/td>Restricts the drawing to a particular area.<\/td><\/tr>
quadraticCurveTo()<\/td>Adds a quadratic B\u00e9zier curve.<\/td><\/tr>
bezierCurveTo()<\/td>Adds a cubic B\u00e9zier curve.<\/td><\/tr>
arc()<\/td>Adds an arc\/curve for creating circles or parts of circles.<\/td><\/tr>
arcTo()<\/td>Adds an arc\/curve between two tangents.<\/td><\/tr>
isPointInPath()<\/td>Defines whether the specified point is in the current path, or not.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Transformations<\/h2>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
scale()<\/td>Scales up or scales down the current drawing.<\/td><\/tr>
rotate()<\/td>Rotates the current drawing.<\/td><\/tr>
translate()<\/td>Adjusts the coordinate system of the canvas.<\/td><\/tr>
transform()<\/td>Applies transformation matrix to the canvas.<\/td><\/tr>
setTransform()<\/td>Is similar to transform(). Can be used to skew, scale, and translate the canvas.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Text<\/h2>\n\n\n\n
Property<\/th>Description<\/th><\/tr><\/thead>
font<\/td>Sets the appearance of a text drawn on the canvas.<\/td><\/tr>
textAlign<\/td>Sets the alignment of a text drawn on the canvas.<\/td><\/tr>
textBaseline<\/td>Sets the vertical alignment of a text drawn on the canvas.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
fillText()<\/td>Adds text to the canvas.<\/td><\/tr>
strokeText()<\/td>Adds outlined text to the canvas.<\/td><\/tr>
measureText()<\/td>Measures the text width.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Image Drawing<\/h2>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
drawImage()<\/td>Draws an image, video, or canvas onto the canvas.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Pixel Manipulation<\/h2>\n\n\n\n
Property<\/th>Description<\/th><\/tr><\/thead>
width<\/td>Returns an ImageData object\u2019s width.<\/td><\/tr>
height<\/td>Returns an ImageData object\u2019s height.<\/td><\/tr>
data<\/td>Returns an object which contains image data of a specified ImageData object.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
createImageData()<\/td>Creates a newImageData object.<\/td><\/tr>
getImageData()<\/td>Returns an ImageData object which copies the pixel data for the specified rectangle.<\/td><\/tr>
putImageData()<\/td>Puts the image data onto the canvas from the ImageData object.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Compositing<\/h2>\n\n\n\n
Property<\/th>Description<\/th><\/tr><\/thead>
globalAlpha<\/td>Sets or returns the current alpha\/transparency\/ value.<\/td><\/tr>
globalCompositeOperation<\/td>Sets or returns the type of compositing operation when a new image is drawn.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Other<\/h2>\n\n\n\n
Method<\/th>Description<\/th><\/tr><\/thead>
save()<\/td>Saves the current state of a context.<\/td><\/tr>
restore()<\/td>Returns the path state and attributes saved previously.<\/td><\/tr>
createEvent()<\/td>Creates an event object.<\/td><\/tr>
getContext()<\/td>Returns a drawing context.<\/td><\/tr>
toDataURL()<\/td>Returns a data URL.<\/td><\/tr><\/tbody><\/table><\/figure>\n","protected":false},"excerpt":{"rendered":"

The HTML5\u00a0<canvas>\u00a0element is used for drawing graphics via scripting (commonly\u00a0JavaScript). But the <canvas> element does not have drawing opportunities on its own. To draw the graphics, you must use a script because the <canvas> element is only a container for graphics. The getContext() method returns an object which presents properties and methods for drawing on […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[546],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9287"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=9287"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9287\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9287"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}