In today’s lesson we were tasked to draw a few things in a web canvas such as a box, triangle and a snowman.
we did this by creating a canvas and giving co-ordinates for the line to drawn at.
For the simple box we were required to specify a starting location then assign a length that it will draw a line and then turn 90 degrees and draw the same distance and then repeat those steps three times to complete the square.
For ty
for the snowman we had to specify three radius’ and three x co ordinates for all the circles on the snow man and then draw the carrot nose and eye circle with another radius.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body data-rsssl=1>
<canvas id= "myCanvas" width="578" height="1000"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2 - 100;
var radius = 70;
var radius2 = 90;
var radius3 = 110;
var radius4 = 10;
var centerY2 = centerY + 130;
var centerY3 = centerY2 + 170;
context.beginPath() ;
context.strokeStyle = '#000000';
context.lineWidth = 5;
context.arc(centerX, centerY3, radius3, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath() ;
context.strokeStyle = '#000000';
context.lineWidth = 5;
context.arc(centerX, centerY2, radius2, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath() ;
context.strokeStyle = '#000000';
context.lineWidth = 5;
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle = '#FFFFFF';
context.fill();
context.stroke();
context.beginPath() ;
context.strokeStyle = '#F05E23';
context.lineWidth = 5;
context.moveTo(centerX + 69, centerY);
context.lineTo(centerX + 110, centerY);
context.stroke();
context.beginPath() ;
context.strokeStyle = '#000000';
context.lineWidth = 5;
context.moveTo(centerX + 20, centerY - 20);
context.arc(centerX + 20, centerY - 20, radius4, 0, 2 * Math.PI, false);
context.stroke();
</script>
</body>
</html>
Terrell Masters 