Activity 2 Drawing Canvas
<!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 dotted #000000;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.8
ctx.fillStyle = "pink";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();//head
ctx.fillStyle = 'brown';
ctx.arc(300,130,100,0,Math.PI *2);
ctx.fill();
ctx.beginPath();//eyesandmouth
ctx.fillStyle = 'cyan';
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,40,0,Math.PI);
ctx.fill();
ctx.moveTo(300,130);
ctx.beginPath();//body
ctx.fillStyle="brown"
ctx.rect(240, 230, 120, 220, 350* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "brown";//arms
ctx.fillRect(360,320,120,4);
ctx.fillStyle = "brown";
ctx.fillRect(120,320,120,5);
ctx.font = "25px serif";
ctx.textAlign = "left";
ctx.textBaseline="middle";
ctx.fillStyle = "black";
ctx.fillText("Hello!!! What's up!!!",10,50);
ctx.font = "25px serif";
ctx.textAlign = "left";
ctx.textBaseline="middle";
ctx.fillStyle = "black";
ctx.fillText("I'm Russell",10,25,90,50);
</script>
</body>
</html>
Comments
Post a Comment