{"id":26148,"date":"2022-12-15T23:54:22","date_gmt":"2022-12-15T18:24:22","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/"},"modified":"2022-12-15T23:54:22","modified_gmt":"2022-12-15T18:24:22","slug":"solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/","title":{"rendered":"[Solved] Can’t understand this javascript code to paint HTML canvas? [closed]"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n
    \n
  1. \n

    Pencil is a class. In JavaScript, class constructors take the form of function MyClass()<\/code><\/p>\n<\/li>\n

  2. \n

    this<\/code> is used to point to the class itself, from within the constructor or member functions. Thus, this.mouseup()<\/code> can be accessed from an instance (in your case) as tool.mouseup()<\/code><\/p>\n<\/li>\n

  3. \n

    Because that’s the variable your class uses to keep track of the movement. If you want to replace tool<\/code>, you have to replace the tool.started<\/code> assignments and evaluations as well<\/p>\n<\/li>\n

  4. \n

    ev._x<\/code> and ev._y<\/code> are just variables pointing at ev.offsetX<\/code> and ev.offsetY<\/code> which are standard properties of the event object<\/p>\n<\/li>\n

  5. \n

    No idea what layerX<\/code> is supposed to be<\/p>\n<\/li>\n

  6. \n

    Since the same function is called on all the events (mousedown<\/code>,mousemove<\/code>,mouseup<\/code>), the last function just figures out which event was triggered and calls the appropriate function within your pencil instance (tool<\/code>).<\/p>\n<\/li>\n<\/ol><\/div>\n

    <\/div>\n<\/div>\n

    3<\/span> <\/p><\/div>\n<\/div>\n

    [ad_2]<\/p>\n

    solved Can’t understand this javascript code to paint HTML canvas? [closed] <\/p>\n","protected":false},"excerpt":{"rendered":"

    [ad_1] Pencil is a class. In JavaScript, class constructors take the form of function MyClass() this is used to point to the class itself, from within the constructor or member functions. Thus, this.mouseup() can be accessed from an instance (in your case) as tool.mouseup() Because that’s the variable your class uses to keep track of … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[1728,346,333],"class_list":["post-26148","post","type-post","status-publish","format-standard","hentry","category-solved","tag-canvas","tag-html","tag-javascript"],"yoast_head":"\n[Solved] Can't understand this javascript code to paint HTML canvas? [closed] - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Can't understand this javascript code to paint HTML canvas? [closed] - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] Pencil is a class. In JavaScript, class constructors take the form of function MyClass() this is used to point to the class itself, from within the constructor or member functions. Thus, this.mouseup() can be accessed from an instance (in your case) as tool.mouseup() Because that’s the variable your class uses to keep track of ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-15T18:24:22+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Can’t understand this javascript code to paint HTML canvas? [closed]\",\"datePublished\":\"2022-12-15T18:24:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/\"},\"wordCount\":144,\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"keywords\":[\"canvas\",\"html\",\"javascript\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/\",\"name\":\"[Solved] Can't understand this javascript code to paint HTML canvas? [closed] - JassWeb\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\"},\"datePublished\":\"2022-12-15T18:24:22+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Can’t understand this javascript code to paint HTML canvas? [closed]\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#website\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/wp-content\\\/uploads\\\/2021\\\/02\\\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/#\\\/schema\\\/person\\\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"contentUrl\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/wp-content\\\/litespeed\\\/avatar\\\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\\\/\\\/jassweb.com\"],\"url\":\"https:\\\/\\\/jassweb.com\\\/solved\\\/author\\\/jaspritsinghghumangmail-com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Can't understand this javascript code to paint HTML canvas? [closed] - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Can't understand this javascript code to paint HTML canvas? [closed] - JassWeb","og_description":"[ad_1] Pencil is a class. In JavaScript, class constructors take the form of function MyClass() this is used to point to the class itself, from within the constructor or member functions. Thus, this.mouseup() can be accessed from an instance (in your case) as tool.mouseup() Because that’s the variable your class uses to keep track of ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/","og_site_name":"JassWeb","article_published_time":"2022-12-15T18:24:22+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Can’t understand this javascript code to paint HTML canvas? [closed]","datePublished":"2022-12-15T18:24:22+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/"},"wordCount":144,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["canvas","html","javascript"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/","url":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/","name":"[Solved] Can't understand this javascript code to paint HTML canvas? [closed] - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-15T18:24:22+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-cant-understand-this-javascript-code-to-paint-html-canvas-closed\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Can’t understand this javascript code to paint HTML canvas? [closed]"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1777008400","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/26148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=26148"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/26148\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=26148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=26148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=26148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}