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