HTML and CSS Reference
In-Depth Information
//Background
context
.
fillStyle
=
'#ffffaa'
;
context
.
fillRect
(
0
,
0
,
theCanvas
.
width
,
theCanvas
.
height
);
//Box
context
.
strokeStyle
=
'#000000'
;
context
.
strokeRect
(
5
,
5
,
theCanvas
.
width
-
10
,
theCanvas
.
height
-
10
);
//video
context
.
drawImage
(
videoElement
,
85
,
30
);
// Text
context
.
fillStyle
=
"#000000"
;
context
.
fillText
(
"Duration:"
+
videoElement
.
duration
,
10
,
280
);
context
.
fillText
(
"Current time:"
+
videoElement
.
currentTime
,
260
,
280
);
context
.
fillText
(
"Loop: "
+
videoElement
.
loop
,
10
,
290
);
context
.
fillText
(
"Autoplay: "
+
videoElement
.
autoplay
,
100
,
290
);
context
.
fillText
(
"Muted: "
+
videoElement
.
muted
,
180
,
290
);
context
.
fillText
(
"Controls: "
+
videoElement
.
controls
,
260
,
290
);
context
.
fillText
(
"Volume: "
+
videoElement
.
volume
,
340
,
290
);
}
var
var
theCanvas
=
document
.
getElementById
(
"canvasOne"
);
var
var
context
=
theCanvas
.
getContext
(
"2d"
);
videoElement
.
play
();
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=
"canvasOne"
width=
"500"
height=
"300"
>
Your browser does not support HTML5 Canvas.
</canvas>
</canvas>
</div>
</div>
</body>
</body>
</html>
</html>
