Why won't my canvas draw? - javascript

My canvas element isnt working right. It wont draw a rectangle. Please help me diagnose the problem. I don't know where the problem is, is it my css, javascript, or html? Did I set up everything right because I got no errors when i ran my debugger and put it on a server?
index.html
<!DOCTYPE html>
<html>
<head>
<title>Paco Developement</title>
<link rel="stylesheet" href="style.css" />
<script src="game.js"></script>
</head>
<body>
<canvas id="canvasBg" height="500" width="800"></canvas>
<canvas id="character" height="500" width="800"></canvas>
</body>
</html>
style.css
* {
padding:0px;
margin:0px;
}
header, section, footer, aside, nav, article, figure, hgroup{
display:block;
}
body {
background:#BADA55;
width:100%;
height:100%;
}
#canvasBg {
display:block;
background:#fff;
margin:100px auto 0px;
}
#character {
display:block;
margin:-500px auto 0px;
}
game.js
var canvasBg = document.getElementById('canvasBg');
var bgCtx = canvasBg.getContext("2d");
document.addEventListener('load',drawRect,false);
function drawRect(){
bgCtx.fillStyle="#FF0000";
bgCtx.fillRect(0,0,150,75);
}

Live Demo
Change document to window for your event listener and it should work for you.
window.addEventListener('load',drawRect,false);

Related

google scripts/html trying to display page within page

First I am going to show my code, this is my html code that's running:
<!DOCTYPE html>
<html>
<head>
<title>Elliots Site</title>
<base target="_top">
<?!= include('Gcss'); ?>
<script type="text/javascript">
</script>
</head>
<body>
<div class="page">
<iframe style="width: 100%; height: 100px; overflow: hidden;" src="http://google.com" width="100" height="100" scrolling="no">Iframes not supported</iframe>
<h1 class="emoj">"😀"</h1>
</div>
<?!= include('Gjavascript'); ?>
</body>
</html>
And this is my css file:
<style>
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.page iframe {
vertical-align:center;
width=200%;
height=100%;
}
.page .emoj {
text-align:center;
color:auto;
vertical-align:center;
}
.page{
background-color:white;
align-items: center;
height:400px;
background-attachment: fixed;
background-repeat: no-repeat;
text-align:center;
}
<style>
I also have two more files to run the code and apply the css file, which I am pretty sure is not the issue. This first one is a gs file which is a form of js the code starts at doGet
function doGet() {
return HtmlService.createTemplateFromFile('gindex')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
and the other one which is html:
<!DOCTYPE html>
<script>
window.addEventListener('load', function() {
console.log('Page is loaded');
});
</script>
Okay now the question. The current result is just a blank page, and its not even printing the text. so far i haven't tried anything that led to much success, so far i have worked on the css file to try to fix it. I have done research, but couldn't find much on google scripts. the goal of the code is to display google homepage inside of the site, I have been deploying it as a web page. This my first post If you have questions I could answer or test for please let me know
Your code looks a bit messy by how it's provided so for demo purposes I made my own. If you want to "embed" google.com first page to your site then use iframe but instead of using google.com try to use this link => https://www.google.com/webhp?igu=1 otherwise it will show nothing.
P.S. To preview code use full-page mode.
.frame {
height: 700px;
width: 600px;
}
.page {
text-align: center;
}
body {
background-color: grey;
height: 100vh;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IRONIXX</title>
</head>
<body>
<section class="page">
<h1 class="emoj">"😀"</h1>
<iframe class="frame" src="https://www.google.com/webhp?igu=1" frameborder="0"></iframe>
</section>
</body>
</html>
I know this doesn't solve your blank page scenario directly, but if you're interested in nesting another site within yours perhaps you'd be interested in using an iframe instead?
Here's a generator. Try punching in google.com and see if you can embed it in your site.

How to change background from static jpg to animated gif picture, but only after script done

Theres full html code.
Hope somebody help me with it. Please.
Need to change background image to another one, but only when Curves script be doned.
Trying to find answer by google, but cant.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #141414 url(Wallpaper.jpg);
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
<script type="text/javascript">
Theres some script things
<title>HTML5 Canvas Generative Art</title>
<style type="text/css">
body {background-color:#141414; overflow: hidden;}
#caption {position:absolute; width:1360px; text-align:center; top:688px; z-index:1}
canvas {}
#displayCanvas {position:absolute; top:0px; left:0px; z-index:0;}
div {}
#container {width:1360px; height:688px; margin:auto;}
</style>
</head>
<body>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">
Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
full html code in Drive Google:
link
Place your code at the bottom of your document. And any external js files you're loading, put them above the below script tag. That should work for you.
<script type="text/javascript">
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('new_image.gif')";
};
</script>
Update:
Your mark up is not properly created. Keeping the tags consistent and putting the relevant tags within head and body is a good practice. Refer to the code below.
// window.onload will ensure the document is fully loaded before running the below script
window.onload = (event) => {
// Your other scripts you'd like to execute before changing the background
// Code to change background
document.body.style.background = "url('https://i.imgur.com/cCqp22b.gif')";
};
body {
background: #141414 url(Wallpaper.jpg);
}
body {
background - color: #141414;
overflow: hidden;
}
# caption {
position: absolute;
width: 1360 px;
text - align: center;
top: 688 px;
z - index: 1
}
canvas {}
# displayCanvas {
position: absolute;
top: 0 px;
left: 0 px;
z - index: 0;
}
div {}
# container {
width: 1360 px;
height: 688 px;
margin: auto;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Canvas</title>
<script src="Modernizr/modernizr-2.0.6.js"></script>
</head>
<body>
<p>...</p>
<div id="container">
<canvas id="displayCanvas" width="1360px" height="688">Your browser does not support HTML5 canvas.
</canvas>
</div>
</body>
</html>
You can set the style.background property using JavaScript after the script is loaded.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: url("paper.gif");
background-color: #cccccc;
}
</style>
</head>
<body>
<!--Load some script here-->
<script>
setTimeout(()=>document.body.style.background = "url('https://i.pinimg.com/originals/f4/52/a2/f452a2f4b634b3011e065da8eaf0a5c3.gif')",1500);//simulate waiting
</script>
</body>
</html>

Code works in JSfiddle, but stops on my webpage [duplicate]

This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 5 years ago.
Sorry, not quite the same as previously asked versions of this. I've tried those solutions to no avail.
I have worked with some folks to iron out some issues with a snippet we were working on. Finally got it working on JSfiddle how we need it, but for whatever reason, it's not working on a plain HTML site. The content looks to load, but the preview doesnt work after choosing an image.
Here is the JSfiddle working here: http://jsfiddle.net/ELcf6/568/
Here is all of the code pieces compiled into a single page for testing. This is the example that seems to not work. Does JSfiddle inject any pre-requisites that I might be missing?
Any help in figuring this out would be greatly appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
</body>
</html>
Your script is running before the DOM has loaded and that's why you are getting the "Cannot read property 'addEventListener' of null" error.
Move the script so that it is just before the close of the body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>

How to use the following code to overlay the current canvas

I found this piece of code on this site and want to use it in my project. However I'm not sure how to change this so it doesn't push the contents off the page when opening the menu. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
if( $(this).text()=="Open")
{
$(this).text("Hide");
}
else
{
$(this).text("Open");
}
$("#panel").slideToggle("fast");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
width:90px;
height: 200px
}
</style>
</head>
<body>
<button id="flip">Open</button>
<div id="panel">Menu!</div>
</div>
<p>
Something else on the page
</body>
</html>

Iframe audio fade on scroll

Some of you may know those cool audio fades on scroll. i am trying to use that method on a "vimeo iframe". my intention is to let the sound of a video fade scrolling down the page and letting it get louder back again scrolling up. to be honest i am a super newbie at js and not even an advanced user of html and css so i am sorry if i am asking for too much if its not possible at all please tell me.
this is what im working with: (credits to http://codepen.io/envira/pen/AuGKh)
its basicaly a vimeo clip and the script effect for an audio fade
<html>
<head>
<meta charset="utf-8">
<title>soundtest</title>
<link href="soundcss - Kopie.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
"error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
"progress","ratechange","readystatechange","seeked","seeking","stalled",
"suspend","timeupdate","volumechange","waiting"]
$(document).ready(function() {
var audioElm = $('#scrollaudio').get(0);
audioElm.play();
var height = $(document).height() - $(window).height();
$(window).scroll(function() {
audioElm.volume = 1 - $(window).scrollTop() / height;
console.log(audioElm.volume);
});
});
</script>
<style>
.article1 {
height:800px;
background:#124A70;
color: #fff;
font-size: 2em;
text-align: center;
padding: 10px;
}
.article2 {
height: 900px;
background: #E04006;
color: #fff;
font-size: 2em;
text-align: center;
padding: 10px;
}
p {
font-family: Tahoma, Arial, sans-serif;
text-shadow: 0px 1px 1px #111;
}
#charset "utf-8";
.vimeoFrame {width:638px; height:358px; overflow:hidden; margin:0 auto;} .vimeoFrame .vimeoXtra {margin-top:-100px;}
.vimeo {display:block; width:638px; height:358px; margin:0 auto;}
.vimeoXtra {display:block; width:638px; height:558px; margin:0 auto;}
#wrapper{
height:358px;
width:638px;
background-color:
overflow:hidden;
}
</style>
</head>
<body>
<div class="article1"><p> Scroll Down</p>
<div id=wrapper">
<div class="vimeoFrame"> <iframe class="vimeoXtra" src="https://player.vimeo.com/video/98417189?autoplay=1&loop=1" frameborder="0"></iframe></div>
</div>
<audio loop id="scrollaudio" src="Material/8_Mile_Battle_Instrumental.mp3"></audio>
</div>
<div class="article2">
</div>
</body>
</html>
I am sorry if i am acting stupid and scrub-ish but i hope you can help me
kindest regards
Everything works fine - just mp3 file in your example is not available for direct download. Try other mp3: http://codepen.io/anon/pen/RPMQmq
<div class="article1"><p> Scroll Down</p>
<audio loop id="scrollaudio" src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"></audio>
</div>
P.S. Use the browser console to debug the application - a great idea!

Categories

Resources