{"id":39,"date":"2025-10-13T15:58:10","date_gmt":"2025-10-13T12:58:10","guid":{"rendered":"https:\/\/airontatrik24.thkit.ee\/wp\/?page_id=39"},"modified":"2025-11-12T16:58:50","modified_gmt":"2025-11-12T14:58:50","slug":"js-canvas-joonistamine","status":"publish","type":"page","link":"https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/","title":{"rendered":"JS: canvas joonistamine"},"content":{"rendered":"\n\n<h1 id=\"Title\">Joonistamine JS-ga<\/h1>\n<canvas id=\"tahvel\" width=\"300\" height=\"250\"><\/canvas>\n<br>\n<input type=\"button\" value=\"Sirge joon\" onclick=\"sirgeJoon()\">\n<br>\n<input type=\"button\" value=\"Kolmnurk\" onclick=\"kolmnurk()\">\n\n<br>\n\n<label for=\"raadius\">Raadius:<\/label>\n\n<input type=\"number\" id=\"raadius\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ring()\">\n<input type=\"button\" value=\"Ring\" onclick=\"ring()\">\n\n<br>\n\n<input type=\"button\" value=\"Ristk\u00fclik\" onclick=\"ristkylik()\">\n\n<label for=\"laius\">Laius:<\/label>\n<input type=\"number\" id=\"laius\" min=\"0\" max=\"100\" value=\"5\" onchange=\"ristkylik()\">\n\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\" id=\"mine\" Name=\"valgusfoorile\" value=\"Mine\" onclick=\"valgusfoor()\">\n<input type=\"button\" id=\"oota\" Name=\"valgusfoorile\" value=\"Oota\" onclick=\"valgusfoor()\">\n<input type=\"button\" id=\"seisa\" Name=\"valgusfoorile\" value=\"Seisa\" onclick=\"valgusfoor()\">\n\n\n<br>\n<input type=\"button\" value=\"Puhasta\" onclick=\"puhasta()\">\n<br>\n\n<!--Lipud joonistamine-->\n<h1 id=\"Title2\">Lipud<\/h1>\n<canvas id=\"lipp\" width=\"330\" height=\"210\"><\/canvas>\n<input type=\"button\" value=\"Eesti lipp\" onclick=\"eestiLipp()\">\n<input type=\"button\" value=\"Prantsuse lipp\" onclick=\"prantsusmaa()\">\n<input type=\"button\" value=\"Hiina lipp\" onclick=\"Hiina()\">\n\n\n\n\n\n\n<style>\ncanvas#tahvel{\n    background-color: skyblue;\n    border: 1px solid black;\n}\nbody{\n    background-color: hotpink;\n    padding-top: 2%;\n    padding-left: 2.5%;\n}\nh1#Title{\n    border: darkblue 1px solid;\n    border-radius: 10px;\n    background-color: skyblue;\n    padding: 10px;\n\n}\nh1#Title2{\n    border: darkblue 1px solid;\n    border-radius: 10px;\n    background-color: skyblue;\n    padding: 10px;\n\n}\ncanvas#lipp{\n    border: darkblue 1px solid;\n}\n<\/style>\n\n\n\n<script>\n\/*lipp script*\/\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 prantsusmaa() {\n    const lipp=document.getElementById(\"lipp\");\n    if(lipp.getContext) {\n        let l = lipp.getContext(\"2d\");\n        l.fillStyle = \"darkblue\";\n        l.fillRect(0,0,110,210);\n        l.fillStyle = \"white\";\n        l.fillRect(110,0,220,210);\n        l.fillStyle = \"red\";\n        l.fillRect(220,0,330,210);\n    }\n}\n\n\/* iseseivalt\n\n1.lisada veel \u00fcks lipp kus olemas vapp v\u00f5i mingi logo lipu peal\n *\/\n\nfunction Hiina() {\n    const lipp=document.getElementById(\"lipp\");\n    if(lipp.getContext) {\n        let l = lipp.getContext(\"2d\");\n\n        l.fillStyle = \"red\";\n        l.fillRect(0,0,330,210);\n\n        const fail=new Image();\n        fail.src=\"https:\/\/airontatrik24.thkit.ee\/wp\/wp-content\/uploads\/2025\/10\/hiina.png\"\n        fail.onload = () => {\n            l.drawImage(fail, 0, 0, 330, 210);\n        }\n\n    }\n}\n\/*\n2. tahvel canvas peal joonistada valgusfoori (kolm nupu - mine, oota, seisa)\n*\/\nfunction valgusfoor(){\n    const tahvel=document.getElementById(\"tahvel\");\n    let mine=document.getElementById(\"mine\");\n    let oota=document.getElementById(\"oota\");\n    let seisa=document.getElementById(\"seisa\");\n\n    if(tahvel.getContext) {\n        \/\/rect\n        let t = tahvel.getContext(\"2d\");\n        t.fillStyle = \"gray\";\n        t.fillRect(95, 25, 100,210);\n\n        \/\/ring top\n\/*\n        t.beginPath();\n        t.fillStyle=\"black\";\n        t.lineWidth = 1;\n        t.arc(145,65,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n        t.fill();\n        \/\/ ring mid\n        t.beginPath();\n        t.fillStyle=\"black\";\n        t.lineWidth = 1;\n        t.arc(145,130,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n        t.fill();\n\n        t.beginPath();\n        t.fillStyle=\"black\";\n        t.lineWidth = 1;\n        t.arc(145,195,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n        t.fill();\n*\/\n        seisa.onclick = function(){\n            t.beginPath();\n            t.fillStyle=\"red\";\n            t.lineWidth = 1;\n            t.arc(145,65,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill()\n\n            t.beginPath();\n            t.fillStyle=\"black\";\n            t.lineWidth = 1;\n            t.arc(145,130,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill()\n\n            t.beginPath();\n            t.fillStyle=\"black\";\n            t.lineWidth = 1;\n            t.arc(145,195,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill()\n\n        }\n        oota.onclick = function(){\n            t.beginPath();\n            t.fillStyle=\"black\";\n            t.lineWidth = 1;\n            t.arc(145,65,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill();\n\n            t.beginPath();\n            t.fillStyle=\"yellow\";\n            t.lineWidth = 1;\n            t.arc(145,130,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill();\n\n            t.beginPath();\n            t.fillStyle=\"black\";\n            t.lineWidth = 1;\n            t.arc(145,195,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill();\n\n        }\n        mine.onclick = function(){\n            t.beginPath();\n            t.fillStyle=\"green\";\n            t.lineWidth = 1;\n            t.arc(145,195,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill();\n\n            t.beginPath();\n            t.fillStyle=\"black\";\n            t.lineWidth = 1;\n            t.arc(145,65,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill();\n            \/\/ ring mid\n            t.beginPath();\n            t.fillStyle=\"black\";\n            t.lineWidth = 1;\n            t.arc(145,130,25,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n            t.fill();\n        }\n\n\n\n}\n}\n\n\n\n\n\n\n\n\n\n\n\n<\/script>\n\n\n\n<script>\n\/*joonistamineScript *\/\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=\"black\";\n        t.lineWidth = 1;\n        t.moveTo(50,100);\n        t.lineTo(150,200);\n        t.stroke();\n    }\n}\n\/\/sirge joon\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=\"Green\";\n        t.fillStyle=\"Green\";\n        t.lineWidth = 1;\n        t.moveTo(50,100);\n        t.lineTo(150,100);\n        t.lineTo(150,200);\n        t.lineTo(50,100);\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\");\n        t.clearRect(0,0,300,250); \/\/ 0,0 -vasak \u00fcleval tahvi  nruk, 300-tahvliu laius, 250- tahlvi k\u00f5rgus\n    }\n}\n\n\/\/sirge joon\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=\"green\";\n        t.lineWidth = 1;\n        t.arc(50,50,r.value,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n        t.stroke();\n        \/\/ring\n        t.beginPath();\n        t.fillStyle=\"green\";\n        t.lineWidth = 1;\n        t.arc(50,120,r.value,0,2*Math.PI, true); \/\/ x, y-keskpunt,\n        t.fill();\n    }\n}\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\");\n        t.fillStyle=\"yellow\";\n        t.fillRect(50,30,laius.value,korgus.value); \/\/ 0,0 -vasak \u00fcleval tahvi  nruk, 300-tahvliu laius, 250- tahlvi k\u00f5rgus\n    }\n}\n\nfunction pilt(){\n    const tahvel=document.getElementById(\"tahvel\");\n    if(tahvel.getContext){\n        let t = tahvel.getContext(\"2d\");\n\n     const fail=new Image();\n     fail.src=\"https:\/\/picsum.photos\/100\/200?random=1\"\n        t.drawImage(fail, 50, 50,100,200);\n    }\n}\n\n\n\n\n\n\n\n\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Joonistamine JS-ga Raadius: Laius: k\u00f5rgus: Lipud<\/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-39","page","type-page","status-publish","hentry","nodate","item-wrap"],"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 - Airon portfoolio %<\/title>\n<meta name=\"description\" content=\"JS: canvas joonistamine, kuidas JS canvase joonistamine aitab luua d\u00fcnaamilisi ja interaktiivseid visuaale. %Airon portfoolio JS: canvas joonistamine -\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/airontatrik24.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 - Airon portfoolio %\" \/>\n<meta property=\"og:description\" content=\"JS: canvas joonistamine, kuidas JS canvase joonistamine aitab luua d\u00fcnaamilisi ja interaktiivseid visuaale. %Airon portfoolio JS: canvas joonistamine -\" \/>\n<meta property=\"og:url\" content=\"https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/\" \/>\n<meta property=\"og:site_name\" content=\"Airon portfoolio\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-12T14:58:50+00:00\" \/>\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:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/\",\"url\":\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/\",\"name\":\"JS: canvas joonistamine - Airon portfoolio %\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/#website\"},\"datePublished\":\"2025-10-13T12:58:10+00:00\",\"dateModified\":\"2025-11-12T14:58:50+00:00\",\"description\":\"JS: canvas joonistamine, kuidas JS canvase joonistamine aitab luua d\u00fcnaamilisi ja interaktiivseid visuaale. %Airon portfoolio JS: canvas joonistamine -\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/#breadcrumb\"},\"inLanguage\":\"et\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/js-canvas-joonistamine\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JS: canvas joonistamine\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/airontatrik24.thkit.ee\\\/wp\\\/\",\"name\":\"Airon portfoolio\",\"description\":\"Noorem Tarkvaraarendaja\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/airontatrik24.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 - Airon portfoolio %","description":"JS: canvas joonistamine, kuidas JS canvase joonistamine aitab luua d\u00fcnaamilisi ja interaktiivseid visuaale. %Airon portfoolio JS: canvas joonistamine -","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:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/","og_locale":"et_EE","og_type":"article","og_title":"JS: canvas joonistamine - Airon portfoolio %","og_description":"JS: canvas joonistamine, kuidas JS canvase joonistamine aitab luua d\u00fcnaamilisi ja interaktiivseid visuaale. %Airon portfoolio JS: canvas joonistamine -","og_url":"https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/","og_site_name":"Airon portfoolio","article_modified_time":"2025-11-12T14:58:50+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minut"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/","url":"https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/","name":"JS: canvas joonistamine - Airon portfoolio %","isPartOf":{"@id":"https:\/\/airontatrik24.thkit.ee\/wp\/#website"},"datePublished":"2025-10-13T12:58:10+00:00","dateModified":"2025-11-12T14:58:50+00:00","description":"JS: canvas joonistamine, kuidas JS canvase joonistamine aitab luua d\u00fcnaamilisi ja interaktiivseid visuaale. %Airon portfoolio JS: canvas joonistamine -","breadcrumb":{"@id":"https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/#breadcrumb"},"inLanguage":"et","potentialAction":[{"@type":"ReadAction","target":["https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/airontatrik24.thkit.ee\/wp\/js-canvas-joonistamine\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/airontatrik24.thkit.ee\/wp\/"},{"@type":"ListItem","position":2,"name":"JS: canvas joonistamine"}]},{"@type":"WebSite","@id":"https:\/\/airontatrik24.thkit.ee\/wp\/#website","url":"https:\/\/airontatrik24.thkit.ee\/wp\/","name":"Airon portfoolio","description":"Noorem Tarkvaraarendaja","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/airontatrik24.thkit.ee\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"et"}]}},"_links":{"self":[{"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/39","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/comments?post=39"}],"version-history":[{"count":10,"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/39\/revisions"}],"predecessor-version":[{"id":56,"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/pages\/39\/revisions\/56"}],"wp:attachment":[{"href":"https:\/\/airontatrik24.thkit.ee\/wp\/wp-json\/wp\/v2\/media?parent=39"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}