38 lines
1.1 KiB
HTML
38 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<head>
|
|
<title>Playing YouTube video on HTML5 canvas</title>
|
|
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" />
|
|
<style type="text/css">
|
|
body {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
}
|
|
</style>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<img id="scream" src="tickleiste.png" alt="The Scream" width="220" height="277">
|
|
|
|
<p>Canvas:</p>
|
|
<canvas id="myCanvas" width="500" height="500" color="red">
|
|
Your browser does not support the HTML5 canvas tag.</canvas>
|
|
<script>
|
|
window.onload;
|
|
var c=document.getElementById("myCanvas");
|
|
var ctx=c.getContext("2d");
|
|
var img=document.getElementById("scream");
|
|
ctx.drawImage(img,10,10);
|
|
var canvas = document.getElementById('myCanvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
context.beginPath();
|
|
context.rect(150, 50, 200, 100);
|
|
context.fillStyle = 'yellow';
|
|
context.fill();
|
|
context.lineWidth = 7;
|
|
context.strokeStyle = 'black';
|
|
context.stroke();
|
|
</script>
|
|
</body>
|
|
</html>
|