Activity #2 (Finals) CANVAS DRAWING
MANILING - ACTIVITY 2 (FINALS)
HTML CODE:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Drawing in Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="668" height="470"
style="border:10px solid #000000;">
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.globalAlpha = 0.8
ctx.fillStyle = "black";
ctx.fillRect(390,385,140,5);
ctx.fillStyle = "black";
ctx.fillRect(90,385,150,5);
ctx.beginPath();
ctx.fillStyle="#F8E266"
ctx.arc(300, 200, 100, 0, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="black"
ctx.arc(250, 180, 10, 0, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="black"
ctx.arc(300, 110, 50, 3, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="black"
ctx.arc(350, 180, 10, 0, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="black"
ctx.arc(300, 260, 20, 3, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="black"
ctx.arc(305, 420, 120, 0, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red"
ctx.arc(300, 370, 8, 0, 2* Math.PI);
ctx.fill();
ctx.stroke()
ctx.beginPath();
ctx.fillStyle="red"
ctx.arc(300, 400, 8, 0, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red"
ctx.arc(300, 430, 8, 0, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle="red"
ctx.arc(300, 460, 8, 0, 2* Math.PI);
ctx.fill();
ctx.stroke();
ctx.font = "32px Comic Sans MS";
ctx.fillStyle = "red";
ctx.textAlign = "left";
ctx.fillText("Hello there!", canvas.width/25, canvas.height/1.5);
</script>
</body>
</html>
Comments
Post a Comment