HTML Canvas Element wont show up - html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inversion</title>
</head>
<link rel="stylesheet" href="style.css">
<script src="main.js"></script>
<body>
<input type="button" onclick="loadlevel()" id="levelsel">
<canvas id="mycanvas"></canvas>
<div
id="message"
> Hi </div>
</body>
</html>
Here is my code. When I delete
<canvas id="mycanvas"></canvas>
the button and the message "Hi" shows up. When that section is included, nothing shows up. Eventually I want it to show a series of 32x32 pixel images to make a map for a simple game. I am using Chrome and it is up to date. I also have a CSS file that should be making the height and width of the canvas 832px and 672px respectively.

Related

Setting an HTML page to a fixed resolution

I'm displaying an HTML overlay on a 1920x1080 stream.
Im trying to create a simple HTML page that has a centered image that shows on top but whenever i display it it's somewhere on the bottom right side.
This is my code, I rather not use CSS if that's an option
What am i missing?
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<center>
<img src="https://s10.gifyu.com/images/once-30-sec-5-min-99.gif" alt="Computer man" style="width:400px;height:100px;padding-bottom: 350;padding-right: 200px">
</center>
<script>
</script>
</body>
</html>
I don't think you can create a fixed resolution only using HTML
but you can put styles in the HTML image tag with maximum height and with instead of linking it to a CSS page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
</head>
<body>
<img href="address of image" style="width=100%; height:100%">
</body>
</html>

Trying to make a google sheet embed auto size (without scrolling) on the webpage

I've tried using fit-content, fill-content, height="100%", and height="auto"
I'm not sure if this is possible, but if it's not google definitely should try and figure out a way to make it work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj"
crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<iframe
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&single=true&widget=true&headers=false"
width="100%" height="fill-content"></iframe>
</body>
</html>
You cannot change the style of an external iframe with internal CSS. Like many other Google embeds, Google Sheets does not give you the option to make the embed responsive.
If you want your iframe to fill the height of the window, you will need to specify the height as a style, i.e. style="height: 100vh;" instead of as an attribute.
<iframe src="https://docs.google.com/spreadsheets/d/e/2PACX-1vR-p4uEH_VDK55IPAhz94TLM03oZ40dis2blDnH_vm31QC8BaqqO0VvZU9c3u_EHS0WB8z1O92NDiae/pubhtml?gid=0&single=true&widget=true&headers=false" width="100%" style="height: 100vh;"></iframe>

How to open a local file in html?

Hi i started learning html a say or two ago and i was just messing around with some features when i thought of making a website which stored my school stuff in a arranged manner then i wanted to make a button that opens a local file but i just couldn't make it happen but i tried searching it on web but nothing worked for me
here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<style>body{background-image: url(x.jpg);
background-size: cover;}
</style> <div id="red">
<button><a src="C:\Users\laksh\Mywebsite\jkoj.html">jkoj</a></button>
</div>
</body>
</html>
don't use src attribute in a tag, use href in place of src

Can not drag div, no translucent image of div while dragging in firefox

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
When dragging the div below you see a translucent picture of the div while dragging in all browsers<p>
except in Firefox version 60.0.2 (64-Bit)<p>
Why ?
<div style='border:1px solid black;display:inline-block' draggable='true'>Click inside me and drag</div>
</body>
</html>
What has to be done to get that translucent picture also in Firefox
while dragging.
Following code solves the issue:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script>
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
</script>
When dragging the div below you see a translucent picture of the div while dragging in all browsers
<p>
except in Firefox version 60.0.2 (64-Bit)
<p>
Why ?
<div style='border:1px solid black;display:inline-block' draggable='true' ondragstart="drag(event)">Click inside me and drag</div>
</body>
</html>

My code is not showing columns horizontally

My code is not working, it is not showing horizontal columns. I tried everything, using sublime text 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custome.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-6">col1</div>
<div class="col-xs-6">col2</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
In your browser, right click on the page and View Page Source. Click on the link to css/bootstrap.min.css and see if it successfully loads the bootstrap styles. I'm wondering if this path needs correcting.
Your code works for me when I use the bootstrap CDN: http://jsfiddle.net/t2rbyj38/