Javascript 2 - Rectangle variables
<!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 canvas variable
var canvasVariable = document.getElementById("myCanvas");
var canvasVar = canvasVariable.getContext("2d");
// rectangle variables
var RectX = 10;
var RectY = 20;
var RectWidth = 40;
var RectHeight = 60;
//Draw rectangle
canvasVar.beginPath();
canvasVar.lineWidth= "5";
canvasVar.strokeStyle= "red";
canvasVar.rect(RectX, RectY, RectWidth, RectHeight);
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 canvas variable
var canvasVariable = document.getElementById("myCanvas");
var canvasVar = canvasVariable.getContext("2d");
// rectangle variables
var RectX = 10;
var RectY = 20;
var RectWidth = 40;
var RectHeight = 60;
//Draw rectangle
canvasVar.beginPath();
canvasVar.lineWidth= "5";
canvasVar.strokeStyle= "red";
canvasVar.rect(RectX, RectY, RectWidth, RectHeight);
canvasVar.stroke();
</script>
</body>
</html>
Make your red rectangle with variables. In the next step we will use the variables to move the rectangle.