{"id":642,"date":"2011-12-07T19:31:47","date_gmt":"2011-12-07T19:31:47","guid":{"rendered":"http:\/\/41j.com\/blog\/?p=642"},"modified":"2011-12-07T15:34:49","modified_gmt":"2011-12-07T15:34:49","slug":"html-canvas-simple-example","status":"publish","type":"post","link":"https:\/\/41j.com\/blog\/2011\/12\/html-canvas-simple-example\/","title":{"rendered":"HTML Canvas simple example"},"content":{"rendered":"<p><a href=\"http:\/\/41j.com\/blog\/wp-content\/uploads\/2011\/12\/draw.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/41j.com\/blog\/wp-content\/uploads\/2011\/12\/draw.png\" alt=\"\" title=\"draw\" width=\"592\" height=\"691\" class=\"aligncenter size-full wp-image-643\" srcset=\"https:\/\/41j.com\/blog\/wp-content\/uploads\/2011\/12\/draw.png 592w, https:\/\/41j.com\/blog\/wp-content\/uploads\/2011\/12\/draw-257x300.png 257w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/a><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n\r\n&lt;script type=&quot;text\/javascript&quot;&gt;\r\n\r\n  function draw_rect(x,y) {\r\n    var canvas = document.getElementById(&quot;m_canvas&quot;);\r\n    if(canvas.getContext) {\r\n      var ctx = canvas.getContext(&quot;2d&quot;);\r\n      ctx.fillStyle = &quot;rgb(200,0,0)&quot;;\r\n      ctx.fillRect(x,y,5,5);\r\n    }\r\n  }\r\n\r\n  function onMouseMove(evt) {\r\n    draw_rect(evt.pageX,evt.pageY);\r\n  }\r\n\r\n  window.onmousemove = onMouseMove;\r\n\r\n&lt;\/script&gt;\r\n\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;canvas id=&quot;m_canvas&quot; width=&quot;800&quot; height=&quot;600&quot;&gt;You need a better web browser.&lt;\/canvas&gt;\r\n\r\n&lt;\/body&gt; \r\n&lt;\/html&gt; \r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>&lt;html&gt; &lt;head&gt; &lt;script type=&quot;text\/javascript&quot;&gt; function draw_rect(x,y) { var canvas = document.getElementById(&quot;m_canvas&quot;); if(canvas.getContext) { var ctx = canvas.getContext(&quot;2d&quot;); ctx.fillStyle = &quot;rgb(200,0,0)&quot;; ctx.fillRect(x,y,5,5); } } function onMouseMove(evt) { draw_rect(evt.pageX,evt.pageY); } window.onmousemove = onMouseMove; &lt;\/script&gt; &lt;\/head&gt; &lt;canvas id=&quot;m_canvas&quot; width=&quot;800&quot; height=&quot;600&quot;&gt;You need a better web browser.&lt;\/canvas&gt; &lt;\/body&gt; &lt;\/html&gt;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-642","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1RRoU-am","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/642","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/comments?post=642"}],"version-history":[{"count":2,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions"}],"predecessor-version":[{"id":645,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/posts\/642\/revisions\/645"}],"wp:attachment":[{"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/media?parent=642"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/categories?post=642"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/41j.com\/blog\/wp-json\/wp\/v2\/tags?post=642"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}