HTML5 canvas scripting ignored - javascript

I am missing something likely painfully obvious. The only reason why I can find a canvas using "inspect element" is because it was declared when its id was attributed. The JavaScript is blatantly ignored. I've tried various commands on the canvas context; nothing happens. Help would be greatly appreciated. Here is an example:
<!doctype html>
<head>
</head>
<body>
<div id="container">
<header>
<canvas id="title_canvas" width: "1200px"; height: "100px"></canvas>
<script>
var title_c = document.getElementByID("title_canvas");
var title_ctx = document.getContext("2d");
title_ctx.fillRect(0,0,100,90);
</script>
</header>
</div>
</body>
</html>

You need to call getContext on the canvas, not the document.

This is what it should be:
<!doctype html>
<head>
</head>
<body>
<div id="container">
<header>
<canvas id="title_canvas" width: "1200px" height: "100px"></canvas>
<script>
var title_c = document.getElementById("title_canvas");
var title_ctx = title_c.getContext("2d");
title_ctx.fillRect(0,0,100,90);
</script>
</header>
</div>
</body>
The getContext is a canvas method not a document method. You also had a stray semicolon in your HTML.

Related

i am using getElement but it's not working in my code, why?

I trying to change the color of a "p" tag using getElementById(), but its not working...
HTML:
<p id="fon">changing color</p>
JavaScript:
var c = document.getElementById(fon);
c.style.color = 'blue';
The id should be in quotation marks
document.getElementById("fon");
If you want to change paragraph color using JS. You can use this code .. :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function changecolor()
{
document.getElementById("fon").style.color='blue';
}
</script>
</head>
<body>
<p id="fon" onclick="changecolor()"> hello this is a para</p>
</body>
</html>

Javascript innerhtml not working on div

<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
</body>
</html>
Why is document.getElementById("passage").innerHTML = "Paragraph changed!" not working for me? I just end up with a blank screen, not even the original "hello".
Your script is called before the element is loaded, try calling the script after loading element
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="passage">hello</div>
<div id="question"></div>
<div id="answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
If you check the console, you can see an error
Uncaught TypeError: Cannot set property 'innerHTML' of null
That is the HTML page is parsed and executed top down.
So, it can't identify what is the element you are mentioning.
So, you should either use an EventListener or place the script just before the end of body tag
Method 1 Event Listener
<!DOCTYPE html>
<html>
<head>
</head>
<script>
window.onload=function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
};
</script>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
</body>
</html>
Method 2 : script is just above body tag
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id = "passage">hello</div>
<div id = "question"></div>
<div id = "answers"></div>
<script>
document.getElementById("passage").innerHTML = "Paragraph changed!";
</script>
</body>
</html>
You script should be executed once the page is loaded.
Otherwise all elements of the page may not be still attached to the dom when you refer to them.
Rather than moving the script after the element declaration that may be error prone (you should always be aware of the order of script), you could use
event designed to be executed after the dom is totally loaded.
For example onload attribute of body :
<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>
Your script is calling before element is loaded.
Try
$(document).ready(function()
{
document.getElementById("passage").innerHTML = "Paragraph changed!";
});
JS:
(function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
})

javascript error setAttribute() [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 months ago.
I am new to javascript programming.
When i try to run this code, the default image in html tags shows up.
I used the setAttribute function but it doesn't work. Please Help!
<!DOCTYPE HTML>
<html>
<head>
<title>Javascript</title>
<script type="text/javascript">
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
</script>
</head>
<body>
<img src="awesomesite.gif" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
</body>
</html>
either move the script to the bottom of your page or add the following to your script
document.onload(function()
{
var foo = document.getElementById("image");
foo.setAttribute("src", "glasses.jpg");
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<img src="http://i.stack.imgur.com/xkF9Q.jpg" id="image" alt="Awesomesite">
<p id="intro">
Hello World
</p>
<script>
window.onload = function () {
var logo = document.getElementById('image');
logo.src = "http://www.w3schools.com/html/pic_mountain.jpg";
};
</script>
</body>
</html>

Displaying a <div> over a <canvas>

The problem, which exists in both Firefox and Chrome, is that I have a canvas with a solid background, and a div with a solid background color/image. The div is margined up over top of the canvas. The div does not display over the canvas. An interesting note is that if there is text inside the div it will properly get displayed. This would mean it's a browser bug... in both browsers. Here is some code for people that want to try it.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#d{background-color:#111;margin-top:-150px;z-index:999999;}
</style>
<script type="text/javascript">
function load() {
var c = document.getElementById("c").getContext("2d");
c.fillStyle = "rgba(255, 200, 200, 1)";
c.fillRect(0, 0, c.canvas.width, c.canvas.height);
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
</html>
So, anybody have any workarounds? Or is there something that I missed in the HTML5 spec that says this is correct?
As a note, please do not ask why I want to use margins instead of fixed/absolute/etc... alternatives. I need margins.
This can only be fixed by applying the style:
#d {position:relative;}
or
#d {position:absolute;}
This occurred to me recently and instead of changing how it's laid out, I switched from div to using a span with display:inline-block.
Works on Firefox/Chrome/Safari.
Have not tested in IE.
Use the following code, hope it helps you:
<head>
<style type="text/css">
#c{background-color:#000;z-index:-1;position: fixed;}
#d{background-color:#aa00aa;margin-top:-50px;z-index:0;}
</style>
<script type="text/javascript">
function load() {
var cntx = document.getElementById("c").getContext("2d");
cntx.fillStyle = "rgba(255, 200, 200, 1)";
cntx.canvas.top = "0";
cntx.canvas.left = "0";
cntx.fillRect(0, 0, cntx.canvas.width, cntx.canvas.height);
var obj = document.getElementById("d");
obj.style.position = "fixed";
obj.style.top = 50;
obj.style.left = 0;
}
</script>
</head>
<body onload="load()">
<canvas id="c" width="500" height="300"></canvas>
<div id="d" style="width:500px;height:300px"></div>
</body>
Adding a position:relative; (or absolute) to #d seems to work in both chrome and firefox. No idea why, if you ask me. Is that good for you?
well i've read your question, and i understand you dont want to use position....whoever you have to use position to get z-index to work. position:relative literally is doing nothing in this case, save what you are requesting. here is a solution, although it relies on position:relative
http://jsfiddle.net/jalbertbowdenii/Ar6Sh/

mooWMD is Undefined?

First off here is the code!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="content/wmd.css" rel="stylesheet" type="text/css" />
<title>some title </title>
</head>
<body>
<div class="main">
<form>
<h2>Only teaxt area</h2>
<div id="wmd-editor-uno" class="wmd-panel">
<div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
<textarea name='id-uno' id='id-uno'></textarea>
</div>
</form>
</div>
<script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
<script type='text/javascript' src="Scripts/moowmd.js"></script>
<script type="text/javascript">
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});
</script>
</body>
</html>
Bam!
My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.
The problem (for later generations) is IE does not accepts the following syntax:
{
att1: 'value',
att2: 'value'
}
Where other browsers do.
I changed it to
{
'att1': 'value',
'att2': 'value'
}
And it is fine now.
(using the mailing list would have gotten my attention earlier)
The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.
Wrap the code in a function:
<script type="text/javascript">
function loaded() {
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});}
</script>
Then add an onload handler to your body tag:
<body onload="loaded();">
The onload handler will not fire until all the javascript, images, css, etc have loaded.
<head>
<title>some title </title>
<link rel="stylesheet" type="text/css" href="Content/wmd.css" />
<script type="text/javascript" src="Scripts/showdown.js"></script>
</head>
<body>
<div class="main">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel">
</div>
<div id="wmd-output" class="wmd-panel">
</div>
</div>
<script type="text/javascript" src="Scripts/wmd.js"></script>
</body>
The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.

Categories