Exercise 10 : Drawing in canvass (IMD)

 



<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Exercise 010 Drawing in Canvas</title>

</head>


<body>

<canvas id="myCanvas" width="1350" height="700"

style="border:56px solid #302f2f;">

</canvas>


<script>

var canvas = document.getElementById("myCanvas");

var ctx = canvas.getContext("2d");

  

ctx.globalAlpha = 0.9

   ctx.fillStyle = "#d4172d";

ctx.fillRect(65,75,125,125);

 ctx.fillStyle = "#ba9565";

ctx.fillRect(85,95,125,125);

ctx.fillStyle = "#11a882";

ctx.fillRect(100,110,125,125);

ctx.fillStyle = "#8f396e";

ctx.fillRect(120,128,125,125);

ctx.fillStyle = "#00aeff";

ctx.beginPath();

ctx.arc(180,190,50,0,2*Math.PI);

ctx.fill();

ctx.fillStyle = "#fffde3";

ctx.beginPath();

ctx.arc(180,190,40,0,2*Math.PI);

ctx.fill();

ctx.fillStyle = "#513896";

ctx.beginPath();

ctx.arc(180,190,30,0,2*Math.PI);

ctx.fill();

 

  

ctx.fillStyle = "#1f1e1d";

ctx.beginPath();

ctx.arc(842,106,75,0,2*Math.PI); ctx.arc(480,106,75,0,2*Math.PI);

ctx.fill();


 

ctx.fillStyle = "#e3e0dc";

ctx.beginPath();

ctx.arc(650,375,269,0,2*Math.PI);

ctx.fill();

  

ctx.fillStyle = "#141414";

ctx.beginPath();

ctx.arc(752,245,56,0,2*Math.PI); ctx.arc(545,245,56,0,2*Math.PI);

ctx.fill();

 

 ctx.fillStyle = "#141414";

ctx.beginPath();

ctx.arc(752,600,56,0,2*Math.PI); ctx.arc(545,600,56,0,2*Math.PI); 

ctx.fill();

  

 ctx.fillStyle = "#2a2b2a";

ctx.beginPath();

ctx.arc(704,589,25,0,2*Math.PI); ctx.arc(601,589,25,0,2*Math.PI); 

ctx.fill();

  

  ctx.fillStyle = "#2a2b2a";

ctx.beginPath();

ctx.arc(739,549,25,0,2*Math.PI); ctx.arc(565,549,25,0,2*Math.PI); 

ctx.fill();

 

  ctx.fillStyle = "#2a2b2a";

ctx.beginPath();

ctx.arc(790,558,25,0,2*Math.PI); ctx.arc(510,558,25,0,2*Math.PI); 

ctx.fill();  

  

 

ctx.fillStyle = "#525252";

ctx.beginPath();

ctx.arc(764,254,15,0,2*Math.PI); ctx.arc(565,254,15,0,2*Math.PI);

ctx.fill();

  

 ctx.fillStyle = "#141414";

ctx.beginPath();

ctx.arc(652,425,32,0,2*Math.PI); 

ctx.arc(669,435,25,0,2*Math.PI); 

ctx.arc(634,435,25,0,2*Math.PI); 

  

ctx.fill();

  

ctx.fillStyle = "#0a6e0a";

ctx.fillRect(925,0,35,815);

ctx.fillRect(1005,0,35,815);

ctx.fillRect(1094,0,32,815);

ctx.fillRect(1200,0,35,815);


 



 

</script>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

Exercise 11 : Counting Drill Game (IMD)

Image
 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Game 0v0 </title> <style> html { font-family: Century Gothic; margin-left: 20%; background-color: #17b8d4;     }        body { max-width: 100px; min-width: 480px;     } fieldset { background-color:#ae94e0; } button { background-color:#c9c012; color: black; border-radius: 30px; width: 200px; height: 60px; } </style> </head> <body> <h1>Count Game!!!</h1> <p> Let's count the shapes on the screen!!!</p> <fieldset> <canvas id="myCanvas" width="995" height="500" style="border:20px;"> </canvas> <label> How many shapes do you see??? </label> <input type="number" id="answer"> </input> <!-- <button id="colors" onclick="colors()" > Colors </but...
Read more

Exercise 12 Responsive Web Page Design (WP)

Image
  HTML <!DOCTYPE html> <html> <head>     ​<meta name="viewport" content="width=device-width, initial-scale=1"> <style> fieldset     { background: #9e4333;       }                body {background-color: #00A4E4;}     }           iframe:focus {   outline: none; } iframe[seamless] {   display: block; } .navbar {   overflow: hidden;   background-color: #121211; } .navbar a {   float: left;   font-size: 16px;   color: #9e4333;   text-align: center;   padding: 14px 16px;   text-decoration: none; } .dropdown {   float: left;   overflow: hidden; } .dropdown .dropbtn {   font-size: 16px;     border: none;   outline: none;   color:#9e4333;   padding: 14px 16px;   background-color: inherit;   font-family: inherit;   margin: 0;...
Read more

Exercise 12 Chat box (IMD)

Image
  HTML___ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> Message Box </title> <link rel="stylesheet" href="Exercise 012 Chat box css.css"> </head> <body> <section> <h1> HI! Welcome to Alexa 👩 click the button to assist you </h1> <button class="chat-btn"> <b> CHAT </b> </button> <div id="chat-container" onclick="changeColor()" class="chat-popup"> <div class="chat-area"> <div class="income-msg"> <img src="https://i.ibb.co/31dgnVS/rikkaasa.png" class="Alexa" alt="Alexa"> <span class="msg"> What can I help you?  </span> </div> </div> <div class="input-area"> <input id="name-input" t...
Read more