Skip to main content

Exercise 10: Drawing in Canvas (Finals Interactive)


 (CODE FOR HTML;)

<!DOCTYPE html>

<html>

<head>

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

<title>Exercise 10 Drawing In Canvas </title>

</head>


<body>

<canvas id="myCanvas" width="1345.5" height="603.5"

style="border:1px solid #000000;">

</canvas>


<script>

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

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

ctx.globalAlpha = 0.8

ctx.fillStyle = "#cbc6dc";

ctx.fillRect(500,110,283,353);

ctx.fillStyle = "#e8b1a9";

ctx.fillRect(520,128,230,300);

ctx.fillStyle = "#00aeff";

ctx.beginPath();


ctx.fillStyle = "#e0defa";

ctx.fillRect(520,403,245,50);

ctx.fillStyle = "#aba4a4";

ctx.fillRect(520,403,245,10);




</script>

</body>

</html>

Comments

Popular posts from this blog

Exercise 11: YouTube Video Link Parameters (Finals Web Prog)

(Code for HTML:) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Youtube Videos Link Parameters </title> <link rel="stylesheet" href="Exercise11iFrameVideo.css"> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/183696100_2901575863495019_8667639209325296233_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=0debeb&_nc_eui2=AeGmZRPZmRmXrOArSHq09vPIKfIhC24RAaYp8iELbhEBpvFlFRJZ9cKWpyHOm3J-Tle-7AutVdLWleXZ1XrgIqBW&_nc_ohc=HTCL7Rxi8jAAX8t6M2L&_nc_ht=scontent.fmnl19-1.fna&oh=98676492910e87038adfb8cd76772c33&oe=60BD0C01" target="Jillian Dela Cruz">About</a> <a href="https://scontent.fmnl19-1.fna.fbcdn.net/v/t1.6435-9/184092486_2901582303494375_8241790509753611562_n.jpg?_nc_cat=102&am

Exercise 13: Login and Sign Up Forms (Finals Interactive)

(CODE FOR LOGIN HTML:) <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Login and Sign Up </title> <link rel="stylesheet" href="Exercise13Login.css"> </head> <body> <form name="form"> <h2>Login</h2> <p> Log in to Multimedia Website </p> <div> <label for="text"> <b> Username </b> </label> <input  id="user"  name="user" type="text" placeholder="Username"> </div> </div> <div> <label for="psw"> <b> Password </b> </label> <input id="pass" name="pass" type="password"  placeholder="Password"> </div> </div> <div> <button type="button" value="Login" onClick="validate(this.form)&qu

12 Months/ Finding the Events

  <html> <body style="background-color:#CBC6DC;"> <h2><p style="font-family:century gothic;"> ENTER NUMBER OF MONTH:</p></h2> <br><input id="text_a" type="text;" /> <p id="answer"></p> <button onclick="myFunction()">Submit</button> <script> function myFunction() { var a=document.getElementById("text_a").value; if (a=="1")   { document.getElementById("answer").innerHTML="1 - January, New Year";   } else if (a=="2")   {