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

HTML5 canvas allows creating text using different font and text properties presented below:<\/p>\n\n\n\n

Properties and Methods<\/h2>\n\n\n\n
Property<\/th>Description<\/th><\/tr><\/thead>
font<\/td>It returns the current font settings and can be set to change the font.<\/td><\/tr>
textAlign<\/td>It returns the current text alignment settings and can be set to change the alignment. The property has the following values: start, end, left, right, and center.<\/td><\/tr>
textBaseline<\/td>It returns the current baseline alignment settings and can be set to change the baseline alignment. The property has the following values: top, hanging, middle, alphabetic, ideographic, and bottom.<\/td><\/tr>
fillText(text, x, y)<\/td>It draws a filled text at the position indicated by the given coordinates x and y.<\/td><\/tr>
strokeText(text, x, y)<\/td>It strokes the text at the position indicated by the given coordinates x and y.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Example of the fillText() property:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <canvas id=\"exampleCanvas\" width=\"300\" height=\"150\" style=\"border:1px solid #d3d3d3;\">\n      Your browser does not support the canvas element.\n    <\/canvas>\n    <script>\n      var canvas = document.getElementById(\"exampleCanvas\");\n      var ctx = canvas.getContext(\"2d\");\n      ctx.font = \"30px Arial\";\n      ctx.fillText(\"Hello World\", 70, 80);\n    <\/script>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example of the textStroke() property:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <canvas id=\"exampleCanvas\" width=\"250\" height=\"150\" style=\"border:1px solid #d3d3d3;\">\n      Your browser does not support the canvas element.\n    <\/canvas>\n    <script>\n      var canvas = document.getElementById(\"exampleCanvas\");\n      var ctx = canvas.getContext(\"2d\");\n      ctx.font = \"27px Arial\";\n      ctx.strokeText(\"Canvas text\", 40, 70);\n    <\/script>\n  <\/body>\n<\/html><\/code><\/pre>\n\n\n\n
Example of adding color and centering text:<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html>\n  <head>\n    <title>Title of the document<\/title>\n  <\/head>\n  <body>\n    <canvas id=\"exampleCanvas\" width=\"400\" height=\"250\" style=\"border:1px solid #d3d3d3;\">\n      Your browser does not support the canvas element.\n    <\/canvas>\n    <script>\n      var canvas = document.getElementById(\"exampleCanvas\");\n      var ctx = canvas.getContext(\"2d\");\n      ctx.font = \"40px Comic Sans MS\";\n      ctx.fillStyle = \"red\";\n      ctx.textAlign = \"center\";\n      ctx.fillText(\"Canvas Text\", canvas.width \/ 2, canvas.height \/ 2);\n    <\/script>\n  <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
HTML5 canvas allows creating text using different font and text properties presented below: Properties and Methods Property Description font It returns the current font settings and can be set to change the font. textAlign It returns the current text alignment settings and can be set to change the alignment. The property has the following values: […]<\/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\/9283"}],"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=9283"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9283\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9283"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9283"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9283"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}