I'm coding in Javascript and I came to an example which I figure was strange.
Example:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,20,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
The above example works and outputs a circle.
However, when I try to copy the exact codes of the script onto a javascript.js file, the circle ceases to exist. Why is that the case?
<!DOCTYPE html>
<html>
<head>
<script src="javascriptFile.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
</body>
</html>
I thought the order of precedence would be that the web browser publishes the html code, and then constructs the DOM which I figure javascript code would run right after the html objects are created. I tried putting a function createShape() inside the canvas and then insert the rest of the codes in function createShape(){} of the javascriptFile.js file but didn't work either.
Would I have to always put the javascript codes in the html body for all canvas objects?
I thought the order of precedence would be that the web browser publishes the html code, and then constructs the DOM which I figure javascript code would run right after the html objects are created.
That is incorrect. Generally, if your JavaScript code appears in the source before the elements it is trying to access (and is not explicitly marked as defered), it will be executed before the browser continues to parse the page.
Embed the script at the bottom of the body and you should be fine:
<!DOCTYPE html>
<html>
<head></head>
<body>
<canvas id="myCanvas"></canvas>
<script src="javascriptFile.js"></script>
</body>
</html>
Related
var hi = document.querySelector("h1");
hi.style.color = "red";
This 2 line code of giving a color to h1 using DOM is giving ERROR
Uncaught TypeError: Cannot read property 'style' of null at prac.js:3
when writing in separate javascript file whereas same 2 lines works fine in console and produces the desired effect.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Experiments</title>
<script src = "prac.js"></script>
</head>
<body>
<h1>Hey there!</h1>
</body>
</html>
Here is the demo of the issue:
var hi = document.querySelector("h1");
hi.style.color = "red";
Since it is not clear how you are using the JavaScript, so identifying the actual issues is difficult.
However, let us assume you are using JavaScript inside the same file HTML only, then the code you wrote is working fine, you can check below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Experiments</title>
<script src = "prac.js"></script>
</head>
<body>
<h1>Hey there!</h1>
<script>
var hi = document.querySelector("h1");
hi.style.color = "red";
</script>
</body>
</html>
Since mostly we are manipulating the DOM using JavaScript, this is a good practice to have JavaScript load from another file(or if you are using Javascript on the same page)at the bottom of your HTML content, just before the </body> tag, as till then most HTML content would have loaded to be used by the DOM.
If your JavaScript code is inside parc.js file, then you need to add that file just above the </body> tag, as shown in the below code.
Your HTML code
<!DOCTYPE html>
<html>
<head>
<title>Experiments</title>
</head>
<body>
<h1>Hey there!</h1>
<script src = "prac.js"></script>
</body>
</html>
Your JavaScript code
var hi = document.querySelector("h1");
hi.style.color = "red";
Probably your script runs before DOM renders. As Palash suggested, put your script tag at the end of the body tag.
I wanted to create text box inside the canvas.
HTML
<canvas id="canvas" width="200" height="50"></canvas>
JavaScript
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
when I run the file HTML not have anything.
You just simply missed the libraries CanvasInput.min.js simply download from the here and add to your code.
Sample Code:
<html>
<title>sample</title>
<head>
<script src="CanvasInput.min.js"></script>
</head>
<body>
<canvas id="canvas" width="200" height="50"></canvas>
<script>
var input = new CanvasInput({
canvas: document.getElementById('canvas')
});
</script>
</body>
</html>
You cannot simply render a standard HTML input field inside a canvas, if that's what you wanted to achieve.
It looks like you were trying to utilize code from this developer page. But it seems you overlooked that there is a whole lot more Javascript required to simulate an input field as a canvas graphic element. Check out this Git repository to see the whole code.
I made a CodePen showing how to put a text input inside a canvas with this technique. For a quick demo add this script tag to your HTML code (you may want to host the code yourself later):
<script type="text/javascript" src="http://goldfirestudios.com/proj/canvasinput/CanvasInput.min.js?v=1.2.0"></script>
I try to override the window.onload event inside an external javascript, but even when putting some basic console.log line outside the window.load function, the code seems to never execute.
Jumping to code here it is :
for index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Experimentation</title>
<script src="canvasEntry3D.js" type="type/javascript"></script>
</head>
<body>
<canvas id="canvas" height="720" width="1280"></canvas>
</body>
</html>
for canvasEntry3D.js :
console.log("slkdfnsdnflknegs");
window.onload = abcdefg;
function abcdefg() {
console.log("in start");
var canvas = document.getElementById("canvas");
}
To really know if the browser has loaded the correct javascript file, I have already checked the developper console.
And I'm not searching to override two times the window.onlad event, so there's no need to use addEventListeners (and there is also no other javascript code that override the window.onload event)
The only mistake in your code I see is the wrong type attribute within your script tag.
Just change it from
<script src="canvasEntry3D.js" type="type/javascript"></script>
to
<script src="canvasEntry3D.js" type="text/javascript"></script>
I'm novel with javascript, and I trying to develop a webpage with dynamics graphs using for that canvas, html 5 and javascript. I wouldn't like to mix html "code" with javascript code, so I decided to keep it separated and call from html the javascript functions. The fact is that when I try to pass my canvas Id to javascript function I'm making a mistake and I have no idea how to fix it. This is my html code:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js">
window.onload = drawRectangulo('myCanvas');
</script>
</head>
<body>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
And my JavaScript file is like this:
function drawRectangulo(idCanvas)
{
var Canvas = document.getElementById('idCanvas');
var context = Canvas.getContext('2d');
context.fillRect(50,0,10,150);
}
I don't know if the call to drawRectangulo function on javascript file is right, and if I'm passing the canvas's id right: window.onload = drawRectangulo('myCanvas'); ¿How should I pass the Id from the html file to the js function?. Should I use: ('', "",) or should I create a new variable, initiate it with the canvas's id and pass it to the function? Am I processing good the variable id inside JavaScript function?
You need to do this:
window.onload = function () {
drawRectangulo('myCanvas');
}
Your code is calling drawRectangulo as soon as it runs, and assigning the result of the call (which is undefined) to window.onload.
Edit based on Dan's comment: you also need to change this:
document.getElementById('idCanvas');
to this:
document.getElementById(idCanvas);
Edit 2: You also need to separate your imported script from your inline script, like this:
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
<script type="text/javascript">
window.onload = drawRectangulo('myCanvas');
</script>
A single <script> element can either import a script from another file, or define an inline script, or both. (That explains why moving your inline script elsewhere in your HTML made it work.)
I think this
var Canvas = document.getElementById('idCanvas');
should be
var Canvas = document.getElementById(idCanvas);
With those apostrophes there, you're not referencing the parameter.
I think I know why it doesn't work. I have made this change on html and now is working right:
<html>
<head>
<title></title>
<script type="text/javascript" language="javascript" src="Funciones.js"></script>
</head>
<body>
<script type="text/javascript" language="javascript">
window.onload = function (){
drawRectangulo('myCanvas');
}
</script>
<h1>Canvas Example:</h1>
<canvas id="myCanvas" width="200" height="100"></canvas>
</body>
</html>
I took out the window.onload from the header to the body and it worked. Thanks for your help anyway.
With the advent of the new HTML5 Canvas, I was wondering if it's possible to draw a HTML section onto the canvas?
The idea is to take a piece of existing HTML code (from the same page, or defined elsewhere) and turn it into graphics.
Something like:
htContext.drawElement(document.getObjectByID("someObj"),0,0);
Firefox has proprietary method drawWindow. With it you can draw the whole document on the canvas. But only in Firefox unfortunately. And also due to security issues you need permissions from the user to do it. So it's suitable only for some kind of internal project.
Here is the sample test page:
<!DOCTYPE html>
<html>
<head>
<title>drawWindow</title>
<script>
window.onload = function(){
netscape.security.PrivilegeManager.enablePrivilege('UniversalBrowserRead');
document.getElementById('canvas').getContext('2d').drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
}
</script>
</head>
<body>
<h1>Test</h1>
<canvas id="canvas"></canvas>
</body>
</html>