{"id":1542,"date":"2010-09-07T13:23:45","date_gmt":"2010-09-07T07:53:45","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=1542"},"modified":"2010-09-07T13:54:13","modified_gmt":"2010-09-07T08:24:13","slug":"canvas","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/canvas\/","title":{"rendered":"canvas"},"content":{"rendered":"\n

The HTML <canvas><\/code> tag is used for creating graphics on the fly. It can be used for rendering graphs, game graphics, or other visual images.<\/p>\n

 <\/p>\n

To draw on the canvas, the <canvas><\/code> tag is used in conjunction with the getContext(contextId)<\/code> method.<\/p>\n

 <\/p>\n

Any content between the <canvas><\/code><\/canvas><\/code> tags is “fallback content”- meaning, it will be displayed only if the canvas cannot be displayed.<\/p>\n

 <\/p>\n

As a script:<\/strong><\/p>\n

\n
\n
\n
function displayCanvas()\r\n\t{\r\n      var canvas = document.getElementById(\"myCanvas\");\r\n      if (canvas.getContext) {\r\n        var ctx = canvas.getContext(\"2d\");\r\n\r\n        ctx.fillStyle = \"rgb(200,0,0)\";\r\n        ctx.fillRect (0, 0, 150, 75);\r\n\r\n        ctx.fillStyle = \"rgba(0, 0, 200, 0.5)\";\r\n        ctx.fillRect (40, 30, 125, 75);\r\n\r\n        ctx.fillStyle = \"rgb(0,0,150)\";\r\n        ctx.strokeRect (20, 20, 50, 100);\r\n      }\r\n    }<\/pre>\n<\/div>\n<\/div>\n<\/blockquote>\n
 <\/p>\n
and this is html<\/strong><\/p>\n
\n
\n
\n
<canvas id=\"myCanvas\" width=\"300\" height=\"200\"><\/code>Your browser does not support the canvas tag. At the time of writing, Firefox, Opera, and Chrome support this tag.\r\n\r\nHere's an image of what it's supposed to look like \"image\"<\/a>.\r\n<\/canvas><\/code><\/pre>\n<\/div>\n<\/div>\n<\/blockquote>\n
Attributes<\/strong>
\nwidth:<\/strong> {Specifies the canvas width in pixels. The default value is 300.Possible values:[Non-negative integer] (for example, 300)}
\nHeight:<\/strong> {Specifies the canvas height in pixels. The default value is 150.Possible values:[Non-negative integer] (for example, 150)}<\/p>\n","protected":false},"excerpt":{"rendered":"
The HTML <canvas> tag is used for creating graphics on the fly. It can be used for rendering graphs, game graphics, or other visual images.   To draw on the canvas, the <canvas> tag is used in conjunction with the getContext(contextId) method.   Any content between the <canvas><\/canvas> tags is “fallback content”- meaning, it will […]<\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1},"categories":[1],"tags":[377,245,4842,378,379],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1542"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=1542"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1542\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=1542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=1542"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=1542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}