ENGO150/FabrikaHradekTour
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

drawing test image into canvas (full)

Browse Source 
idk if I won't remake this somehow differently
This commit is contained in:
Václav Šmejkal 2023-05-16 15:13:10 +02:00
parent 6d6ef0f1f3
commit b895548bda
Signed by: ENGO150
GPG Key ID: F6D6DF86242C5A59
3 changed files with 29 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -5,11 +5,14 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./res/style.css">
<script src="./res/script.js"></script> <script src="./res/script.js"></script>
<title>Fabrika Hrádek Tour</title> <title>Fabrika Hrádek Tour</title>
</head> </head>
<body onload="load_panorama()"> <body onload="load_panorama()">
<div id="panorama"></div> <div id="panorama_div">
<canvas id="panorama">This browser doesn't seem to support canvas. sorry idk</canvas>
</div>
</body> </body>
</html> </html>

16
res/script.js
View File

@ -1,4 +1,18 @@
function load_panorama() function load_panorama()
{ {
document.getElementById("panorama").style.backgroundImage = "./img/test.jpg" //NOT WORKING console.log(window.width);
var ctx = document.getElementById('panorama').getContext('2d');
var img = new Image();
var width_buffer;
img.onload = function()
{
width_buffer = 5000;
ctx.canvas.width=width_buffer;
ctx.canvas.height=width_buffer / 2;
ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, width_buffer, width_buffer / 2);
};
img.src = './res/img/test.jpg';
} }

11
res/style.css
View File

@ -1 +1,10 @@
/*stuff*/ #panorama
{
display: inline;
}
#panorama_div
{
width: 100%;
text-align:center;
}