Java Script joonistamine veebis Canvas’i abil
Joonistamine veebis on lihtne ja lõbus tegevus, mille jaoks on vajalik vaid natuke JavaScript ja HTML5 canvas’i element. Veebis joonistamine võimaldab luua erinevaid kujundeid, nagu ringid, ristkülikud, jooned ja kolmnurgad, kasutades vaid koodirea abil kontrollitavaid joonistamisfunktsioone.
// canvas puhastamine
function kustuta(){
const pyhi=document.getElementById(“pyhi”);
if(pyhi.getContext) {
let p = pyhi.getContext(“2d”); //canvas nimi
p.clearRect(0,0,400,300);
}
}
function ring(){
const pyhi=document.getElementById(“pyhi”);
let radius=document.getElementById(“radius”);
if(pyhi.getContext){
let p=pyhi.getContext(“2d”); //canvas nimi
//أ¼mberjoon – ذ¾ذ؛ر€رƒذ¶ذ½ذ¾رپر‚رŒ
p.beginPath(); //algab tee
p.arc(50, 50, 20, 0, 2*Math.PI, true); //x, y, r
p.strokeStyle=”red”;
p.stroke(); //joonista
//ring
p.beginPath(); //algab tee
p.arc(100, 50, radius.value, 0, 2*Math.PI, true); //x, y, r
p.fillStyle=”blue”;
p.fill(); //joonista
}
}
//ristkأ¼lik – ذ؟ر€رڈذ¼ذ¾رƒذ³ذ¾ذ»رŒذ½ذ¸ذ؛
function ristkylik() {
const pyhi=document.getElementById(“pyhi”);
let laius=document.getElementById(“laius”);
let korgus=document.getElementById(“korgus”);
if(pyhi.getContext) {
let p = pyhi.getContext(“2d”); //canvas nimi
p.fillStyle=”green”;
p.fillRect(100, 200, laius.value, korgus.value); //x, y, width, height
}
}
function joon() {
const pyhi=document.getElementById(“pyhi”);
if(pyhi.getContext) {
let p = pyhi.getContext(“2d”); //canvas nimi
//joon
p.beginPath();
p.strokeStyle=”purple”;
p.lineWidth=2;
p.fillStyle=”blue”;
p.moveTo(300, 80); //alguspunkt
p.lineTo(100, 80); //lأµpppunkt
p.stroke();
}
}
function kolmnurk(){
const pyhi=document.getElementById(“pyhi”);
if(pyhi.getContext) {
let p = pyhi.getContext(“2d”); //canvas nimi
p.beginPath();
p.strokeStyle=”purple”;
p.lineWidth=2;
p.moveTo(50, 100); //alguspunkt
p.lineTo(150, 100);
p.lineTo(150, 250);
p.lineTo(50, 100); //lأµpppunkt
p.stroke();
p.fill();
}
}
// Canvas puhastamine
function kustuta_lipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext) {
let p = lipp.getContext(“2d”); //canvas nimi
p.clearRect(0,0,450,300);
}
}
// Eesti lipp
function eestilipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext){
let l=lipp.getContext(“2d”); //canvas nimi
l.fillStyle=”#0072CE”;
l.fillRect(0,0,450,100);
l.fillStyle=”black”;
l.fillRect(0,100,450,100);
l.fillStyle=”white”;
l.fillRect(0,200,450,100);
}
}
/* Lipud:
* 1 – nagu FRA
* 2 – Sveits
* 3 – oma valik
* 4 – kus on lisatud pilt (vapp)
* Kustuta nupp
*/
// Prantsuse lipp
function prantsuselipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext){
let l=lipp.getContext(“2d”); //canvas nimi
l.fillStyle=”#000091″;
l.fillRect(0,0,150,300);
l.fillStyle=”white”;
l.fillRect(150,0,150,300);
l.fillStyle=”#E1000F”;
l.fillRect(300,0,150,300);
}
}
// Sveitsi lipp
function sveitsilipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext){
let l=lipp.getContext(“2d”); //canvas nimi
l.fillStyle=”#DA291C”;
l.fillRect(0,0,450,300);
l.fillStyle=”white”;
l.fillRect(195,55,60,190);
l.fillStyle=”white”;
l.fillRect(130,120,190,60);
}
}
// Norra lipp
function norralipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext){
let l = lipp.getContext(“2d”); //canvas nimi
l.fillStyle=”#BA0C2F”;
l.fillRect(0,0,450,300);
l.fillStyle=”white”;
l.fillRect(120,0,60,300);
l.fillStyle=”white”;
l.fillRect(0,120,450,60);
l.fillStyle=”#00205B”;
l.fillRect(135,0,30,300);
l.fillStyle=”#00205B”;
l.fillRect(0,135,450,30);
}
}
// Andorra lipp
function andorralipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext) {
let l=lipp.getContext(“2d”); //canvas nimi
l.fillStyle=”#0018A8″;
l.fillRect(0,0,150,300);
l.fillStyle=”#FEDF00″;
l.fillRect(150,0,150,300);
l.fillStyle=”#D52B1E”;
l.fillRect(300,0,150,300);
let img=new Image();
img.src=’https://mariasmolina24.thkit.ee/wp/eng/wp-content/uploads/sites/3/2025/03/andorra.png’;
img.onload=function () {
l.drawImage(img,161,81);
}
}
}
// Philippines lipp
function philippineslipp(){
const lipp=document.getElementById(“lipp”);
if(lipp.getContext){
let l=lipp.getContext(“2d”); //canvas nimi
l.fillStyle=”#0032A0″;
l.fillRect(0,0,450,150);
l.fillStyle=”#BF0D3E”;
l.fillRect(0,150,450,150);
l.beginPath();
l.fillStyle=”white”;
l.moveTo(0, 0); //alguspunkt
l.lineTo(225, 150);
l.lineTo(0, 300);
l.lineTo(0, 0); //lأµpppunkt
l.fill();
let img=new Image();
img.src=’https://mariasmolina24.thkit.ee/wp/eng/wp-content/uploads/sites/3/2025/03/phlp.png’;
img.onload=function () {
l.drawImage(img,2,35, 200, 230);
}
}
}
/* أœlesanne: MAJAKE
* majake peab olema joonistatud:
* sein, aken, katus, uks, korsten ja lisa veel midagi omamoodi
* Kokku peab olema 6-8 nuppu
* Lisa kustuta ja joonista kأµik korraga*/
function kustuta_majake(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.clearRect(0,0,450,300);
}
}
function taevas(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m=majake.getContext(“2d”);
/* https://www.w3schools.com/graphics/canvas_gradients.asp */
let gradient=m.createLinearGradient(0, 0, 0, 225);
gradient.addColorStop(0, “darkblue”);
gradient.addColorStop(0.5, “cornflowerblue”);
gradient.addColorStop(1, “lightblue”);
m.fillStyle = gradient;
m.fillRect(0, 0, 450, 225);
}
}
function maa() {
const majake = document.getElementById(“majake”);
if (majake.getContext) {
let m=majake.getContext(“2d”);
let gradient=m.createLinearGradient(0, 225, 0, 300);
gradient.addColorStop(0, “#C1F376”);
gradient.addColorStop(0.5, “#5FA136”);
gradient.addColorStop(1, “#16561D”);
m.fillStyle = gradient;
m.fillRect(0, 225, 450, 150);
}
}
function pilvid() {
const majake = document.getElementById(“majake”);
if (majake.getContext) {
let m = majake.getContext(“2d”);
let gradient=m.createLinearGradient(0, 0, 0, 150);
gradient.addColorStop(0, “white”);
gradient.addColorStop(0.5, “white”);
gradient.addColorStop(1, “#77a6eb”);
m.beginPath();
m.fillStyle = gradient;
m.arc(65, 100, 17, 0, 2 * Math.PI, true);
m.arc(82, 85, 17, 0, 2 * Math.PI, true);
m.arc(107, 91, 17, 0, 2 * Math.PI, true);
m.arc(125, 104, 17, 0, 2 * Math.PI, true);
m.arc(126, 115, 19, 0, 2 * Math.PI, true);
m.arc(143, 115, 13, 0, 2 * Math.PI, true);
m.arc(106, 121, 17, 0, 2 * Math.PI, true);
m.arc(75, 121, 15, 0, 2 * Math.PI, true);
m.arc(60, 120, 15, 0, 2 * Math.PI, true);
m.arc(47, 117, 15, 0, 2 * Math.PI, true);
m.arc(36, 119, 14, 0, 2 * Math.PI, true);
m.arc(90, 108, 26, 0, 2 * Math.PI, true);
m.arc(84, 108, 24, 0, 2 * Math.PI, true);
m.arc(114, 108, 24, 0, 2 * Math.PI, true);
m.arc(141, 114, 14, 0, 2 * Math.PI, true);
m.fill();
m.beginPath();
let gradient_2=m.createLinearGradient(0, 0, 0, 80);
gradient_2.addColorStop(0, “white”);
gradient_2.addColorStop(0.5, “white”);
gradient_2.addColorStop(1, “#77a6eb”);
m.fillStyle = gradient_2;
m.arc(380, 51, 17, 0, 2 * Math.PI, true);
m.arc(397, 36, 17, 0, 2 * Math.PI, true);
m.arc(422, 42, 17, 0, 2 * Math.PI, true);
m.arc(440, 55, 17, 0, 2 * Math.PI, true);
m.arc(441, 66, 19, 0, 2 * Math.PI, true);
m.arc(458, 66, 13, 0, 2 * Math.PI, true);
m.arc(421, 72, 17, 0, 2 * Math.PI, true);
m.arc(390, 72, 15, 0, 2 * Math.PI, true);
m.arc(375, 71, 15, 0, 2 * Math.PI, true);
m.arc(362, 68, 15, 0, 2 * Math.PI, true);
m.arc(351, 70, 14, 0, 2 * Math.PI, true);
m.arc(405, 59, 26, 0, 2 * Math.PI, true);
m.arc(399, 59, 24, 0, 2 * Math.PI, true);
m.arc(429, 59, 24, 0, 2 * Math.PI, true);
m.arc(456, 65, 14, 0, 2 * Math.PI, true);
m.fill();
}
}
function paike(){
const majake = document.getElementById(“majake”);
if (majake.getContext) {
let m = majake.getContext(“2d”);
m.beginPath();
m.arc(100, 70, 20, 0, 2 * Math.PI, true); //x, y, r
m.fillStyle = “#fcf576″;
m.fill();
m.beginPath();
m.fillStyle=”#fcf576″;
m.moveTo(78, 59);
m.lineTo(90, 48);
m.lineTo(77, 46);
m.lineTo(78, 59);
m.fill();
m.beginPath();
m.fillStyle=”#fcf576″;
m.moveTo(100, 46);
m.lineTo(112, 38);
m.lineTo(115, 51);
m.lineTo(100, 46);
m.fill();
m.beginPath();
m.fillStyle=”#fcf576″;
m.moveTo(122, 59);
m.lineTo(124, 75);
m.lineTo(133, 65);
m.lineTo(122, 59);
m.fill();
m.beginPath();
m.fillStyle=”#fcf576″;
m.moveTo(122, 81);
m.lineTo(110, 92);
m.lineTo(124, 95);
m.lineTo(122, 81);
m.fill();
m.beginPath();
m.fillStyle=”#fcf576″;
m.moveTo(101, 95);
m.lineTo(89, 103);
m.lineTo(85, 90);
m.lineTo(101, 95);
m.fill();
m.beginPath();
m.fillStyle=”#fcf576”;
m.moveTo(80, 83);
m.lineTo(77, 68);
m.lineTo(67, 77);
m.lineTo(80, 83);
m.fill();
}
}
function sein() {
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.beginPath();
m.fillStyle=”#ead0a8″;
m.strokeStyle=”SaddleBrown”;
m.lineWidth=3;
m.moveTo(215, 170);
m.lineTo(310, 70);
m.lineTo(405, 170);
m.lineTo(215, 170);
m.stroke();
m.fill();
m.lineWidth=2;
m.fillStyle=”#ead0a8″;
m.strokeStyle=”SaddleBrown”;
m.fillRect(220,170,180,15);
m.strokeRect(220,170,180,15);
m.fillStyle=”#D2B48C”;
m.strokeStyle=”SaddleBrown”;
m.fillRect(220,185,180,15);
m.strokeRect(220,185,180,15);
m.fillStyle=”#ead0a8″;
m.strokeStyle=”SaddleBrown”;
m.fillRect(220,200,180,15);
m.strokeRect(220,200,180,15);
m.fillStyle=”#D2B48C”;
m.strokeStyle=”SaddleBrown”;
m.fillRect(220,215,180,15);
m.strokeRect(220,215,180,15);
m.fillStyle=”#ead0a8″;
m.strokeStyle=”SaddleBrown”;
m.fillRect(220,230,180,15);
m.strokeRect(220,230,180,15);
m.fillStyle=”#D2B48C”;
m.strokeStyle=”SaddleBrown”;
m.fillRect(220,245,180,15);
m.strokeRect(220,245,180,15);
m.fillStyle=”#bba27b”;
m.strokeStyle=”SaddleBrown”;
m.fillRect(140,170,75,15);
m.strokeRect(140,170,75,15);
m.fillStyle=”#af9068″;
m.strokeStyle=”SaddleBrown”;
m.fillRect(140,185,75,15);
m.strokeRect(140,185,75,15);
m.fillStyle=”#bba27b”;
m.strokeStyle=”SaddleBrown”;
m.fillRect(140,200,75,15);
m.strokeRect(140,200,75,15);
m.fillStyle=”#af9068″;
m.strokeStyle=”SaddleBrown”;
m.fillRect(140,215,75,15);
m.strokeRect(140,215,75,15);
m.fillStyle=”#bba27b”;
m.strokeStyle=”SaddleBrown”;
m.fillRect(140,230,75,15);
m.strokeRect(140,230,75,15);
m.fillStyle=”#af9068″;
m.strokeStyle=”SaddleBrown”;
m.fillRect(140,245,75,15);
m.strokeRect(140,245,75,15);
m.fillRect(400,170,5,90);
m.strokeRect(400,170,5,90);
m.fillRect(215,170,5,90);
m.strokeRect(215,170,5,90);
m.fillStyle=”#937752″
m.fillRect(135,170,5,90);
m.strokeRect(135,170,5,90);
}
}
function aken(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.fillStyle = “skyblue”;
m.strokeStyle=”white”
m.lineWidth = 3;
m.fillRect(320, 200, 25, 45);
m.strokeRect(320,200,25,45);
m.fillRect(345, 200, 25, 45);
m.strokeRect(345,200,25,45);
m.beginPath();
m.strokeStyle=”white”;
m.lineWidth=3;
m.moveTo(357, 207);
m.lineTo(365, 207);
m.lineTo(365, 217);
m.stroke();
m.beginPath();
m.strokeStyle=”white”;
m.lineWidth=3;
m.moveTo(365, 221);
m.lineTo(365, 226);
m.stroke();
//teine aken
m.fillStyle = “cornflowerblue”;
m.strokeStyle = “lightgray”;
m.lineWidth = 3;
m.fillRect(166, 200, 25, 45);
m.strokeRect(166, 200, 25, 45);
m.beginPath();
m.strokeStyle = “white”;
m.lineWidth = 3;
m.moveTo(178, 207);
m.lineTo(186, 207);
m.lineTo(186, 217);
m.stroke();
m.beginPath();
m.strokeStyle = “white”;
m.lineWidth = 3;
m.moveTo(186, 221);
m.lineTo(186, 226);
m.stroke();
//kolmas aken
m.beginPath();
m.fillStyle=”skyblue”;
m.strokeStyle=”white”;
m.lineWidth=7;
m.arc(310, 125, 18, Math.PI, 0, false)
m.stroke();
m.fill()
m.lineWidth=3;
m.fillRect(290,126,40,30)
m.strokeRect(290,126,40,30);
m.beginPath();
m.moveTo(310, 105);
m.lineTo(310, 156);
m.stroke();
m.beginPath();
m.moveTo(325, 130);
m.lineTo(325, 140);
m.stroke();
m.beginPath();
m.moveTo(325, 143);
m.lineTo(325, 146);
m.stroke();
}
}
function uks(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.fillStyle = “lightgrey”;
m.strokeStyle = “dimgrey”
m.lineWidth = 3;
m.fillRect(245, 215, 30, 44);
m.strokeRect(245, 215, 30, 44);
m.beginPath();
m.arc(266, 233, 3, 0, 2*Math.PI, true); //x, y, r
m.fillStyle=”dimgrey”;
m.fill();
m.beginPath();
m.arc(260, 217, 13, Math.PI, 0, false)
m.fillStyle=”lightgrey”;
m.strokeStyle=”dimgrey”;
m.lineWidth=7;
m.stroke();
m.fill()
}
}
function katus(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.beginPath();
m.fillStyle=”firebrick”;
m.strokeStyle=”maroon”;
m.lineWidth=3;
m.moveTo(220, 170);
m.lineTo(120, 170);
m.lineTo(180, 80);
m.lineTo(300, 80);
m.lineTo(310, 70);
m.lineTo(320, 80);
m.lineTo(370, 80);
m.lineTo(420, 170);
m.lineTo(405, 170);
m.lineTo(310, 70);
m.lineTo(220, 170);
m.fill();
m.stroke();
m.beginPath();
m.fillStyle=”black”;
m.strokeStyle=”black”;
m.moveTo(420, 178);
m.lineTo(407, 186);
m.lineTo(407, 178);
m.lineTo(420, 178);
m.fill();
m.stroke();
m.beginPath();
m.fillStyle=”black”;
m.strokeStyle=”black”;
m.moveTo(119, 178);
m.lineTo(133, 186);
m.lineTo(133, 178);
m.lineTo(119, 178);
m.fill();
m.stroke();
m.beginPath();
m.strokeStyle=”maroon”;
m.lineWidth=10;
m.moveTo(118, 174);
m.lineTo(220, 174);
m.lineTo(310, 70);
m.lineTo(405, 174);
m.lineTo(422, 174);
m.stroke()
}
}
function korsten(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.fillStyle = “firebrick”;
m.strokeStyle = “maroon”
m.lineWidth = 3;
m.fillRect(220, 50, 25, 30);
m.strokeRect(220, 50, 25, 30);
m.beginPath();
m.strokeStyle=”maroon”;
m.lineWidth=15;
m.moveTo(215, 50);
m.lineTo(250, 50);
m.stroke()
}
}
function poosad(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
let gradient=m.createLinearGradient(0, 220, 0, 300);
gradient.addColorStop(0, “#b0de78”);
gradient.addColorStop(0.7, “#0c402c”);
gradient.addColorStop(1, “#0c402c”);
m.beginPath();
m.fillStyle = gradient;
m.moveTo(90, 270);
m.lineTo(98, 268);
m.lineTo(94, 263);
m.lineTo(98, 268);
m.lineTo(102, 259);
m.lineTo(97, 250);
m.lineTo(111, 250);
m.lineTo(113, 244);
m.lineTo(117, 245);
m.lineTo(120, 238);
m.lineTo(125, 240);
m.lineTo(135, 230);
m.lineTo(145, 240);
m.lineTo(161, 238);
m.lineTo(161, 246);
m.lineTo(175, 246);
m.lineTo(170, 253);
m.lineTo(181, 254);
m.lineTo(181, 257);
m.lineTo(198, 259);
m.lineTo(188, 265);
m.lineTo(198, 269);
m.lineTo(180, 270);
m.lineTo(180, 276);
m.lineTo(159, 272);
m.lineTo(156, 276);
m.lineTo(143, 273);
m.lineTo(113, 273);
m.lineTo(95, 278);
m.lineTo(98, 272);
m.lineTo(90, 270);
m.fill();
m.beginPath();
m.fillStyle = gradient;
m.moveTo(339, 261);
m.lineTo(350, 255);
m.lineTo(345, 250);
m.lineTo(365, 250);
m.lineTo(365, 240);
m.lineTo(373, 242);
m.lineTo(385, 233);
m.lineTo(385, 241);
m.lineTo(399, 238);
m.lineTo(400, 245);
m.lineTo(421, 250);
m.lineTo(413, 258);
m.lineTo(427, 263);
m.lineTo(420, 268);
m.lineTo(420, 272);
m.lineTo(420, 272);
m.lineTo(400, 273);
m.lineTo(398, 278);
m.lineTo(390, 273);
m.lineTo(365, 275);
m.lineTo(358, 278);
m.lineTo(357, 271);
m.lineTo(342, 274);
m.lineTo(348, 265);
m.lineTo(339, 261);
m.fill();
//lilled
m.beginPath();
m.arc(139, 248, 4, 0, 2*Math.PI, true);
m.fillStyle=”red”;
m.fill();
m.beginPath();
m.arc(120, 259, 4, 0, 2*Math.PI, true);
m.fillStyle=”red”;
m.fill();
m.beginPath();
m.arc(169, 261, 4, 0, 2*Math.PI, true);
m.fillStyle=”red”;
m.fill();
m.beginPath();
m.arc(359, 261, 4, 0, 2*Math.PI, true);
m.fill();
m.beginPath();
m.arc(380, 249, 4, 0, 2*Math.PI, true);
m.fillStyle=”red”;
m.fill();
m.beginPath();
m.arc(400, 261, 4, 0, 2*Math.PI, true);
m.fillStyle=”red”;
m.fill();
m.beginPath();
m.arc(151, 258, 2, 0, 2*Math.PI, true);
m.fillStyle=”red”;
m.fill();
m.beginPath();
m.arc(397, 250, 2, 0, 2*Math.PI, true);
m.fillStyle=”red”;
m.fill();
}
}
function tee(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.beginPath();
m.fillStyle = “lightgray”;
m.strokeStyle=”dimgrey”;
m.lineWidth = 2;
// ذ؟ذµر€ذ²ذ°رڈ ر‚ر€ذ°ذ؟ذµر†ذ¸رڈ
m.moveTo(245, 261);
m.lineTo(240, 267);
m.lineTo(280, 267);
m.lineTo(275, 261);
m.lineTo(245, 261);
m.fill();
m.stroke();
// ذ²ر‚ذ¾ر€ذ°رڈ ر‚ر€ذ°ذ؟ذµر†ذ¸رڈ
m.beginPath();
m.moveTo(238, 272);
m.lineTo(228, 282);
m.lineTo(292, 282);
m.lineTo(283, 272);
m.lineTo(238, 272);
m.fill();
m.stroke();
// ر‚ر€ذµر‚رŒرڈ ر‚ر€ذ°ذ؟ذµر†ذ¸رڈ
m.beginPath();
m.moveTo(226, 289);
m.lineTo(214, 302);
m.lineTo(306, 302);
m.lineTo(294, 289);
m.lineTo(226, 289);
m.fill();
m.stroke();
}
}
function kass(){
const majake=document.getElementById(“majake”);
if(majake.getContext) {
let m = majake.getContext(“2d”);
m.beginPath();
m.fillStyle = “black”;
m.moveTo(261, 79);
m.lineTo(261, 74);
m.lineTo(262, 71);
m.lineTo(263, 68);
m.lineTo(265, 65);
m.lineTo(267, 63);
m.lineTo(268, 61);
m.lineTo(266, 59);
m.lineTo(265, 57);
m.lineTo(265, 55);
m.lineTo(264, 51);
m.lineTo(267, 52);
m.lineTo(272, 52);
m.lineTo(274, 51);
m.lineTo(275, 50);
m.lineTo(275, 52);
m.lineTo(276, 58);
m.lineTo(277, 60);
m.lineTo(277, 66);
m.lineTo(278, 68);
m.lineTo(279, 70);
m.lineTo(279, 74);
m.lineTo(278, 76);
m.lineTo(277, 79);
m.lineTo(261, 79);
m.fill();
m.beginPath();
m.strokeStyle = “black”;
m.lineWidth = 2;
m.moveTo(279, 78);
m.moveTo(282, 78);
m.lineTo(283, 76);
m.lineTo(283, 68);
m.lineTo(284, 66);
m.lineTo(286, 65);
m.lineTo(288, 66);
m.stroke();
}
}
function terve_maja(){
taevas();
maa();
paike();
pilvid();
sein();
aken();
katus();
uks();
korsten();
poosad();
tee();
kass();
}.JS {
font-size: 24px;
font-weight: bold;
font-family: Poppins, Quicksand, sans-serif;
margin: 4%;
}
/***** Canvas *****/
div#container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
gap: 0;
width: 100%; /* ذ¸ذ»ذ¸ ذ¼ذµذ½رŒرˆذµ */
margin: 0 auto;
}
div#container div {
margin: 0 auto 40px;;
width: 90%;
background-color: #d4d4d4;
border: 2px dotted white;
border-radius: 30px;
padding: 2%;
box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
div#majake_div {
margin: 0 auto 40px;;
width: 50%;
background-color: #d4d4d4;
border: 2px dotted white;
border-radius: 30px;
padding: 2%;
box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
}
div#container div h1, div#majake_div h1{
text-align: center;
color: #244855;
}
div#container div h1::first-letter, div#majake_div h1::first-letter{
color: #e64833;
}
div#lipud input[type=button], div#lipud input[type=button]:hover{
width: 30%;
}
input[type=button]{
border: 3px solid #90aead;
border-radius: 20px;
padding: 10px;
margin: 1%;
font-weight: bold;
color: white;
background-color: #244855;
cursor: pointer;
text-transform: uppercase;
text-shadow: #244855 1px 1px 2px;
width: 20%;
}
input[type=button]:hover, input[type=button]:hover.kustuta, input[type=button]:hover.terve_maja{
border: 3px solid #e64833;
background-color: #e64833;
box-shadow: 0 0 10px #e64833;
}
input[type=button].kustuta, input[type=button].terve_maja{
border: 3px solid #244855;
background-color: #90aead;
}
input[type=button]#terve_maja{
width: 40%;
}
input[type=button]#terve_maja:hover{
width: 40%;
}
#radius, #laius, #korgus{
width: 65px;
height: 25px;
font-size: 16px;
padding: 5px 10px;
border: 2px solid #ccc;
border-radius: 5px;
text-align: center;
background-color: white;
}
#radius:focus, #laius:focus, #korgus:focus{
outline: none;
border-color: #e64833;
background-color: #fff9ee;
}
#radius:hover, #laius:hover, #korgus:hover{
border-color: #e64833;
background-color: #fff9ee;
box-shadow: 0 0 5px #e64833;
}
canvas{
background-color: #ebf0f0;
/* width: 400px; */
border: 1px solid gray;
}
input[type=button].kustuta{
width: 30%;
}
