{"id":46,"date":"2025-10-13T14:58:08","date_gmt":"2025-10-13T12:58:08","guid":{"rendered":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/?page_id=46"},"modified":"2025-11-14T08:59:38","modified_gmt":"2025-11-14T06:59:38","slug":"js-canvas-joonistamine","status":"publish","type":"page","link":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/","title":{"rendered":"JS: canvas joonistamine"},"content":{"rendered":"\n<h1>Joonistamine JS-ga<\/h1>\n<canvas id=\"tahvel\" width=\"300\" height=\"250\"><\/canvas>\n<br>\n<input type=\"button\" value=\"puhasta\" onclick=\"puhasta()\">\n<input type=\"button\" value=\"Sirge joon\" onclick=\"sirgeJoon()\">\n<input type=\"button\" value=\"Kolmnurk\" onclick=\"kolmnurk()\">\n<br>\n<label for=\"raadius\">R:<\/label>\n<input type=\"number\" id=\"raadius\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ring()\">\n<input type=\"button\" value=\"Ring\" onclick=\"ring()\">\n<br>\n<input type=\"button\" value=\"Ristk\u00fclik\" onclick=\"ristkylik()\">\n<label for=\"laius\">Laius:<\/label>\n<input type=\"number\" id=\"laius\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ristkylik()\">\n<label for=\"korgus\">K\u00f5rgus:<\/label>\n<input type=\"number\" id=\"korgus\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ristkylik()\">\n<br>\n<input type=\"button\" value=\"picsum pilt\" onclick=\"pilt()\">\n<br>\n<input type=\"button\" value=\"Valgusfoor\" onclick=\"valgusfoor()\">\n<input type=\"button\" value=\"Mine\" onclick=\"roheline()\">\n<input type=\"button\" value=\"Oota\" onclick=\"kollane()\">\n<input type=\"button\" value=\"Seisa\" onclick=\"punane()\">\n\n<!-- lipude joonistamine-->\n<h1>Lipud<\/h1>\n<canvas id=\"lipp\" width=\"330\" height=\"210\"><\/canvas>\n<br>\n<input type=\"button\" value=\"Eesti lipp\" onclick=\"eestiLipp()\">\n<br>\n<input type=\"button\" value=\"Prantsusmaa lipp\" onclick=\"prantsusmaaLipp()\">\n<br>\n<input type=\"button\" value=\"Mehhiko lipp\" onclick=\"mehhikoLipp()\">\n\n\n\n<style>\ncanvas#tahvel{\n    background-color: purple;\n    border: 1px solid black;\n}\ncanvas#lipp{\n    border: 1px solid grey;\n}\nh1{\nfont-size: 15px;\n}\n<\/style>\n\n\n\n<script>\n\/\/sirge joon\nfunction sirgeJoon(){\n    \/\/m\u00e4\u00e4rame tahvli\n    const tahvel=document.getElementById(\"tahvel\");\n    if(tahvel.getContext){\n        let t=tahvel.getContext(\"2d\"); \/\/ anname tahvlinimi on t\n        \/\/ joon\n        t.beginPath();\n        t.strokeStyle=\"white\"\n        t.lineWidth = 1;\n        t.moveTo(20,80); \/\/ algus punkt\n        t.lineTo(50,190); \/\/ l\u00f5pppunkt\n        t.stroke();\n    }\n}\n\/\/kolmnurk\nfunction kolmnurk(){\n    \/\/m\u00e4\u00e4rame tahvli\n    const tahvel=document.getElementById(\"tahvel\");\n    if(tahvel.getContext){\n        let t=tahvel.getContext(\"2d\"); \/\/ anname tahvlinimi on t\n        \/\/ joon\n        t.beginPath();\n        t.strokeStyle=\"white\"\n        t.fillStyle=\"white\"\n        t.lineWidth = 1;\n        t.moveTo(50,100); \/\/ algus punkt\n        t.lineTo(150,100);\n        t.lineTo(150,200);\n        t.lineTo(50,100); \/\/ l\u00f5pppunkt\n        t.stroke();\n        t.fill();\n    }\n}\nfunction puhasta(){\n    const tahvel=document.getElementById(\"tahvel\");\n    if(tahvel.getContext){\n        let t=tahvel.getContext(\"2d\"); \/\/ anname tahvlinimi on t\n        t.clearRect(0,0,300,250); \/\/ 0, 0 - vasak \u00fcleval tahvli nurk  300 - tahvli laius, 250 - k\u00f5rgus\n    }\n}\n\/\/Ring\nfunction ring(){\n    \/\/m\u00e4\u00e4rame tahvli\n    const tahvel=document.getElementById(\"tahvel\");\n    let r=document.getElementById(\"raadius\");\n    if(tahvel.getContext){\n        let t=tahvel.getContext(\"2d\"); \/\/ anname tahvlinimi on t\n        \/\/ \u00fcmberjoon\n        t.beginPath();\n        t.strokeStyle=\"grey\"\n        t.lineWidth = 1;\n        t.arc(190, 190, r.value, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n\n        \/\/ ring\n        t.beginPath();\n        t.strokeStyle=\"grey\"\n        t.fillStyle=\"grey\"\n        t.lineWidth = 1;\n        t.arc(80, 190, r.value, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n    }\n}\n\/\/ ristk\u00fclik\nfunction ristkylik(){\n    const tahvel=document.getElementById(\"tahvel\");\n    let laius=document.getElementById(\"laius\");\n    let korgus=document.getElementById(\"korgus\");\n    if(tahvel.getContext){\n        let t=tahvel.getContext(\"2d\"); \/\/ anname tahvlinimi on t\n        t.fillStyle=\"grey\"\n        t.fillRect(50,30,laius.value,korgus.value); \/\/ 0, 0 - vasak \u00fcleval tahvli nurk  300 - tahvli laius, 250 - k\u00f5rgus\n    }\n}\n\nfunction pilt(){\n    const tahvel=document.getElementById(\"tahvel\");\n    if(tahvel.getContext){\n        let t=tahvel.getContext(\"2d\"); \/\/ anname tahvlinimi on t\n        const fail=new Image();\n        fail.src=\"https:\/\/picsum.photos\/200\/300\";\n        fail.onload = () => {\n            t.drawImage(fail, 50, 50, 100, 200);\n        }\n\n    }\n}\n\n\n\nfunction valgusfoor(){\n    const tahvel=document.getElementById(\"tahvel\");\n    let laius=document.getElementById(\"laius\");\n    let korgus=document.getElementById(\"korgus\");\n    if(tahvel.getContext){\n        let t=tahvel.getContext(\"2d\"); \/\/ anname tahvlinimi on t\n        t.fillStyle=\"grey\"\n        t.fillRect(50,30,100,200); \/\/ 0, 0 - vasak \u00fcleval tahvli nurk  300 - tahvli laius, 250 - k\u00f5rgus\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 190, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 130, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 70, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n    }\n}\n\nfunction roheline(){\n    \/\/m\u00e4\u00e4rame tahvli\n    const tahvel=document.getElementById(\"tahvel\");\n    let r=document.getElementById(\"raadius\");\n    if(tahvel.getContext){\n\n        let t=tahvel.getContext(\"2d\");\n        \/\/ ring\n        t.beginPath();\n        t.strokeStyle=\"darkgreen\"\n        t.fillStyle=\"darkgreen\"\n        t.lineWidth = 1;\n        t.arc(100, 190, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 130, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 70, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n    }\n}\n\nfunction kollane(){\n    \/\/m\u00e4\u00e4rame tahvli\n    const tahvel=document.getElementById(\"tahvel\");\n    let r=document.getElementById(\"raadius\");\n    if(tahvel.getContext){\n\n        let t=tahvel.getContext(\"2d\");\n        \/\/ ring\n        t.beginPath();\n        t.strokeStyle=\"yellow\"\n        t.fillStyle=\"yellow\"\n        t.lineWidth = 1;\n        t.arc(100, 130, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        \/\/ ring\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 70, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 190, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n    }\n}\n\nfunction punane(){\n    \/\/m\u00e4\u00e4rame tahvli\n    const tahvel=document.getElementById(\"tahvel\");\n    let r=document.getElementById(\"raadius\");\n    if(tahvel.getContext){\n\n        let t=tahvel.getContext(\"2d\");\n        \/\/ ring\n        t.beginPath();\n        t.strokeStyle=\"red\"\n        t.fillStyle=\"red\"\n        t.lineWidth = 1;\n        t.arc(100, 70, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 130, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n\n        t.beginPath();\n        t.strokeStyle=\"black\"\n        t.fillStyle=\"black\"\n        t.lineWidth = 1;\n        t.arc(100, 190, 25, 0, 2*Math.PI, true); \/\/ x, y - keskpunkt\n        t.stroke();\n        t.fill();\n    }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\nfunction eestiLipp(){\n    const lipp=document.getElementById(\"lipp\");\n    if(lipp.getContext){\n        let l=lipp.getContext(\"2d\");\n        l.fillStyle=\"blue\";\n        l.fillRect(0,0,330,70);\n        l.fillStyle=\"black\";\n        l.fillRect(0,70,330,70);\n        l.fillStyle=\"white\";\n        l.fillRect(0,140,330,70);\n    }\n}\nfunction prantsusmaaLipp(){\n    const lipp=document.getElementById(\"lipp\");\n    if(lipp.getContext){\n        let l=lipp.getContext(\"2d\");\n        l.fillStyle=\"blue\";\n        l.fillRect(0,0,110,210);\n        l.fillStyle=\"white\";\n        l.fillRect(110,0,110,210);\n        l.fillStyle=\"red\";\n        l.fillRect(220,0,110,210);\n    }\n}\nfunction mehhikoLipp(){\n    const lipp=document.getElementById(\"lipp\");\n    if(lipp.getContext){\n        let l=lipp.getContext(\"2d\");\n        l.fillStyle=\"darkgreen\";\n        l.fillRect(0,0,110,210);\n        l.fillStyle=\"white\";\n        l.fillRect(110,0,110,210);\n        l.fillStyle=\"red\";\n        l.fillRect(220,0,110,210);\n\n        const fail=new Image();\n        fail.src=\"https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/2\/2a\/Coat_of_arms_of_Mexico.svg\/250px-Coat_of_arms_of_Mexico.svg.png\";\n        fail.onload = () => {\n            l.drawImage(fail, 120, 85, 90, 50);\n        }\n    }\n}\n<\/script>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a href=\"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"578\" src=\"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA-1024x578.png\" alt=\"\" class=\"wp-image-222\" style=\"width:381px;height:auto\" srcset=\"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA-1024x578.png 1024w, https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA-300x169.png 300w, https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA-768x434.png 768w, https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA-150x85.png 150w, https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA.png 1240w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><figcaption class=\"wp-element-caption\">HTML canvas<\/figcaption><\/figure>\n\n\n\n<p><a href=\"https:\/\/www.w3schools.com\/html\/html5_canvas.asp\">https:\/\/www.w3schools.com\/html\/html5_canvas.asp<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is HTML Canvas?<\/h2>\n\n\n\n<p>The HTML&nbsp;<code>&lt;canvas&gt;<\/code>&nbsp;element is used to draw graphics, on the fly, via JavaScript.<\/p>\n\n\n\n<p>The&nbsp;<code>&lt;canvas&gt;<\/code>&nbsp;element is only a container for graphics. You must use JavaScript to actually draw the graphics.<\/p>\n\n\n\n<p>Canvas has several methods for drawing paths, boxes, circles, text, and adding images.<\/p>\n\n\n\n<p>Canvas is supported by all major browsers.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Joonistamine JS-ga R: Laius: K\u00f5rgus: Lipud https:\/\/www.w3schools.com\/html\/html5_canvas.asp What is HTML Canvas? The HTML&nbsp;&lt;canvas&gt;&nbsp;element is used to draw graphics, on the fly, via JavaScript. The&nbsp;&lt;canvas&gt;&nbsp;element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas &hellip; <a href=\"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/\">J\u00e4tka lugemist <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-46","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.5 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>JS: canvas joonistamine - Savva Smirnyagin portfoolio<\/title>\n<meta name=\"description\" content=\"JS: canvas joonistamine, kood, html, js, style, canvas JS: canvas joonistamine Savva Smirnyagin portfoolio -\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/\" \/>\n<meta property=\"og:locale\" content=\"et_EE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JS: canvas joonistamine - Savva Smirnyagin portfoolio\" \/>\n<meta property=\"og:description\" content=\"JS: canvas joonistamine, kood, html, js, style, canvas JS: canvas joonistamine Savva Smirnyagin portfoolio -\" \/>\n<meta property=\"og:url\" content=\"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/\" \/>\n<meta property=\"og:site_name\" content=\"Savva Smirnyagin portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-14T06:59:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1240\" \/>\n\t<meta property=\"og:image:height\" content=\"700\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minut\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/\",\"url\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/\",\"name\":\"JS: canvas joonistamine - Savva Smirnyagin portfoolio\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/1_sQuSbqYHW-38cJXo3RsvWA-1024x578.png\",\"datePublished\":\"2025-10-13T12:58:08+00:00\",\"dateModified\":\"2025-11-14T06:59:38+00:00\",\"description\":\"JS: canvas joonistamine, kood, html, js, style, canvas JS: canvas joonistamine Savva Smirnyagin portfoolio -\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"et\",\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/#primaryimage\",\"url\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/1_sQuSbqYHW-38cJXo3RsvWA.png\",\"contentUrl\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/1_sQuSbqYHW-38cJXo3RsvWA.png\",\"width\":1240,\"height\":700},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS: canvas joonistamine\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/\",\"name\":\"Savva Smirnyagin portfoolio\",\"description\":\"Noorem Tarkvaraarendaja\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/savvasmirnyagin24.thkit.ee\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"et\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JS: canvas joonistamine - Savva Smirnyagin portfoolio","description":"JS: canvas joonistamine, kood, html, js, style, canvas JS: canvas joonistamine Savva Smirnyagin portfoolio -","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:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/","og_locale":"et_EE","og_type":"article","og_title":"JS: canvas joonistamine - Savva Smirnyagin portfoolio","og_description":"JS: canvas joonistamine, kood, html, js, style, canvas JS: canvas joonistamine Savva Smirnyagin portfoolio -","og_url":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/","og_site_name":"Savva Smirnyagin portfoolio","article_modified_time":"2025-11-14T06:59:38+00:00","og_image":[{"width":1240,"height":700,"url":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/","url":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/","name":"JS: canvas joonistamine - Savva Smirnyagin portfoolio","isPartOf":{"@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/#primaryimage"},"image":{"@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/#primaryimage"},"thumbnailUrl":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA-1024x578.png","datePublished":"2025-10-13T12:58:08+00:00","dateModified":"2025-11-14T06:59:38+00:00","description":"JS: canvas joonistamine, kood, html, js, style, canvas JS: canvas joonistamine Savva Smirnyagin portfoolio -","breadcrumb":{"@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/"]}]},{"@type":"ImageObject","inLanguage":"et","@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/#primaryimage","url":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA.png","contentUrl":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-content\/uploads\/2025\/11\/1_sQuSbqYHW-38cJXo3RsvWA.png","width":1240,"height":700},{"@type":"BreadcrumbList","@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/js-canvas-joonistamine\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/"},{"@type":"ListItem","position":2,"name":"JS: canvas joonistamine"}]},{"@type":"WebSite","@id":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/#website","url":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/","name":"Savva Smirnyagin portfoolio","description":"Noorem Tarkvaraarendaja","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"}]}},"_links":{"self":[{"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":5,"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/46\/revisions"}],"predecessor-version":[{"id":224,"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/46\/revisions\/224"}],"wp:attachment":[{"href":"https:\/\/savvasmirnyagin24.thkit.ee\/wp\/wp-json\/wp\/v2\/media?parent=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}