HTML and CSS Reference
In-Depth Information
var
var
yOffset
=
0
;
function
function
drawScreen
(){
context
.
clearRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
var
var
currentPath
=
context
.
beginPath
();
context
.
strokeStyle
=
"red"
;
//need list of available colors
context
.
lineWidth
=
5
;
context
.
moveTo
(
0
,
0
+
yOffset
);
context
.
lineTo
(
50
,
0
+
yOffset
);
context
.
lineTo
(
50
,
50
+
yOffset
);
context
.
stroke
();
context
.
closePath
();
yOffset
+=
1
;
}
function
function
gameLoop
() {
window
.
setTimeout
(
gameLoop
,
20
);
drawScreen
()
}
gameLoop
();
}
<
/script>
</head>
</head>
<body>
<body>
<div
<div style=
"position: absolute; top: 50px; left: 50px;"
>
<canvas
<canvas id=
"canvas"
width=
"500"
height=
"500"
>
Your browser does not support the HTML 5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
Canvas clearing function to our
drawScreen()
function. We then draw our path, adding the
yOffset
to each y-axis value.
