ACT2


 <!DOCTYPE html>

<html>

<head>

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

<title>Activity 2 Drawing Canvas</title>

</head>


<body>

<canvas id="myCanvas" width="668" height="470"

style="border:5px dashed #FA6646;">

</canvas>


<script>

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

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

ctx.globalAlpha = 0.8

ctx.fillStyle = "grey";

ctx.fillRect(0, 0, canvas.width, canvas.height);


ctx.beginPath();//head

ctx.fillStyle = 'black';

ctx.rect(220,70,160,160,Math.PI *2);

ctx.fill();


ctx.beginPath();//eyesandmouth

ctx.fillStyle = 'white';

ctx.rect(250,100,30,30,Math.PI *2);

ctx.moveTo(370,120);

ctx.rect(315,100,30,30,Math.PI *2);

ctx.moveTo(240,160);

ctx.arc(300,160,30,0,Math.PI);

ctx.fill();

ctx.moveTo(300,130);



ctx.beginPath();//body

ctx.fillStyle="black"

ctx.rect(240, 230, 120, 220, 350* Math.PI);

ctx.fill();

ctx.stroke();  


ctx.beginPath();

ctx.fillStyle = "black";//arms

ctx.fillRect(360,250,120,10);

ctx.fillStyle = "black";

ctx.fillRect(120,250,120,10);


ctx.font = "25px serif";//word

ctx.textAlign = "left";

ctx.textBaseline="middle"; 

ctx.fillStyle = "blue";

ctx.fillText("HUG me PLS!",10,50);


ctx.font = "25px serif";//word

ctx.textAlign = "left";

ctx.textBaseline="middle"; 

ctx.fillStyle = "blue";

ctx.fillText("Be Happy",10,25,90,50);





</script>

</body>

</html>


Comments

Post a Comment

Popular posts from this blog

Act3

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> Counting Drill Game </title> <style>        body { max-width: 200px; min-width: 580px;  } fieldset { background-color: white; margin: auto; align-content: center; padding: 60px; width: 100px; height: 600px; } buon { background-color: darkcyan; color: darkcyan; border-radius: 10px; width: 100px; height: 50px; } .demo{ background-color:white; color:darkgrey; font-size: 20px; } html { font-family: arial; margin-left: 4%; background-color: darkcyan;     } </style> </head> <body> <h1> Counting Drill Game</h1> <p> Count how many square on the screen! </p> <fieldset> <canvas id="myCanvas" width="900" height="200" style="border:none;"> </canvas> <p id="demo" class="demo"> </p> <label> How ma
Read more

ACT 1

 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Change Button Properties Onchange Events</title> <link rel="stylesheet" href="csscode.css"> </head> <body> <fieldset> <h1 style="font-family:'Arial'"> Change Button Properties Onchange Events </h1> <h3 style="font-family:'Arial'"> Enter Color: </h3> <input type="text" id="input1"/> <br> <h3 style="font-family:'Arial'"> Enter Number: </h3> <input type="number" id="input2" onchange="onchangeevent()"/> <br> <br> <br> <input class="btn" type="button" id="display1"> <input class="btn" type="button" id="display2"> <input class="btn"
Read more