Javascript 1 - Draw a Rectangle
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<canvas id="myCanvas" width = "600" height="400" style="border:1px solid"></canvas>
<script>
// Set up the canvas
var canvasVariable = document.getElementById("myCanvas");
var canvasVar = canvasVariable.getContext("2d");
// Draw the rectangle
canvasVar.beginPath();
canvasVar.lineWidth= "5";
canvasVar.strokeStyle= "red";
canvasVar.rect(10, 10, 50, 50);
canvasVar.stroke();
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<canvas id="myCanvas" width = "600" height="400" style="border:1px solid"></canvas>
<script>
// Set up the canvas
var canvasVariable = document.getElementById("myCanvas");
var canvasVar = canvasVariable.getContext("2d");
// Draw the rectangle
canvasVar.beginPath();
canvasVar.lineWidth= "5";
canvasVar.strokeStyle= "red";
canvasVar.rect(10, 10, 50, 50);
canvasVar.stroke();
</script>
</body>
</html>
Assignment
1. Copy the above code to notepad and save with an .htm extension.
2. Open the file with a web browser.
3. Open the console in the web browser.
4. Add code to draw a green rectangle at coordinates (60, 200) that is 40 by 80.
1. Copy the above code to notepad and save with an .htm extension.
2. Open the file with a web browser.
3. Open the console in the web browser.
4. Add code to draw a green rectangle at coordinates (60, 200) that is 40 by 80.