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

The JavaScript should be used to draw on the canvas. We are going to do with step by step.<\/p>\n\n\n\n

1. Find the Canvas Element<\/h2>\n\n\n\n

To find the canvas element use the HTML DOM method: getElementById():<\/p>\n\n\n\n

var canvas=document.getElementById(\"canvas\");<\/code><\/pre>\n\n\n\n
2. Create a drawing object<\/h2>\n\n\n\n
Use the getContext() HTML object, with properties and methods:<\/p>\n\n\n\n
var ctx = canvas.getContext(\"2d\");<\/code><\/pre>\n\n\n\n
3. Draw on the Canvas Element<\/h2>\n\n\n\n
Now you can draw on the canvas. Use the fillStyle property can be a CSS color, a pattern, or a gradient.<\/p>\n\n\n\n
ctx.fillStyle = \"#1c87c9\";<\/code><\/pre>\n\n\n\n
You can also use the fillRect (x, y, width, height) method that draws a rectangle that is filled with the fill style, on the canvas:<\/p>\n\n\n\n
ctx.fillRect(0, 0, 230, 130);<\/code><\/pre>\n\n\n\n
Example of the HTML <canvas> tag:<\/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=\"canvas\" width=\"250\" height=\"150\" style=\"border:1px solid #dddddd;\">\n      The canvas tag is not supported by your browser.\n    <\/canvas>\n    <script>\n      var canvas = document.getElementById(\"canvas\");\n      var ctx = canvas.getContext(\"2d\");\n      ctx.fillStyle = \"#1c87c9\";\n      ctx.fillRect(0, 0, 230, 130)\n    <\/script>\n  <\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
The JavaScript should be used to draw on the canvas. We are going to do with step by step. 1. Find the Canvas Element To find the canvas element use the HTML DOM method: getElementById(): 2. Create a drawing object Use the getContext() HTML object, with properties and methods: 3. Draw on the Canvas Element […]<\/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\/9277"}],"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=9277"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/9277\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=9277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=9277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=9277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}