I'm trying to load raphael.js (downloaded and run locally) into an HTML file but the script refuses to exit, erroring out with this in my JS console:
Uncaught TypeError:
Cannot call method 'appendChild' of null
bV on raphael.js:7
a on raphael.js:7
(anonymous function) on raphael.html:22
This is for the minified version, the same error occurs in the non-min version on line 1789.
I downloaded the code from the website, tried both compressed and uncompressed, as well as downloading the JS file linked in one of the demos, all of which work fine in my browser (chrome).
Any thoughts?
I was having the same problem and it turned out to be a load order issue. Here's the original code:
<!doctype html>
<html>
<head>
<script src='raphael-1.5.2.js'></script>
<script>
var paper = Raphael(10, 50, 300, 250);
var circle = paper.circle(50, 40, 10);
circle.attr('fill', '#c00');
circle.attr('stroke', '#fff');
</script>
</head>
<body></body>
</html>
Turns out that when Raphael(10, 50, 300, 250) is called, it tries to append a canvas element to the body ... which doesn't exist yet. So wrapping it in a window.onload or jQuery onload function solved the problem:
<!doctype html>
<html>
<head>
<script src='raphael-1.5.2.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
<script>
$(function () {
var paper = Raphael(10, 50, 300, 250);
var circle = paper.circle(50, 40, 10);
circle.attr('fill', '#c00');
circle.attr('stroke', '#fff');
});
</script>
</head>
<body></body>
</html>
Related
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 2 years ago.
So I have this really basic js script linked in the HTML, it gives no errors when i try to run it but it just doesn't do what it's supposed to. Here's the code:
var canvas = document.getElementById("canvas"),
c = canvas.getContext("2d"),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight;
c.fillRect(0, 0, 50, 50);
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='main.js'></script>
</head>
<body>
<canvas id='canvas'></canvas>
</body>
</html>
This should just draw a square in the top-left corner, but it does nothing. It was originally a quite large file, but i reduced it to this just as a proof of concept. As you can see, the snippet works, but chrome doesn't.
your script is launched before the declaration of the canvas. At the time of script launch your canvas dom object is not defined. In addition, change type to text/javascript. Change to this :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id='canvas'></canvas>
<script type='text/javascript' src='main.js'></script>
</body>
</html>
I've got this issue with the canvas not being written to the browser, I'm following a w3schools tutorial to build a basic game.
I'm wondering why the body-block isn't growing given the placement of the canvas in the style tag. The javascript is an external file, the dimensions of the canvas tag are specified there.
There should be the thread for the CSS calls and a thread for the HTML/Javascript calls, where and why is this code not defining a block for my canvas?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
<script type="text/javascript" src="/Users/cgoodwin/game/g.js">
window.onload = start;
</script>
</body>
</html>
The above is the HTML document
Below is the JS
function start(){
gameArea.start();
}
var gameArea={
canvas:document.createElement("canvas"),
start:function(){
this.canvas.width=480;
this.canvas.height=270;
this.context=this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval=setInterval(update,20);
},
clear:function(){
this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
}
}
var gamePiece;
function start(){
gameArea.start();
gamePiece=new component(30,30,"red",10,120);
}
function component(width,height,color,x,y){
this.width=width;
this.height=height;
this.x=x;
this.y=y;
this.update=function(){
ctx=gameArea.context;
ctx.fillStyle=color;
ctx.fillRect(this.x,this.y,this.width,this.height);
}
}
function updateGameArea(){
gameArea.clear();
gamePiece.x += 1;
gamePiece.update();
}
I added a "Watch Expression" with the developer tools on the gamePiece and it's saying it isn't defined. Likely, that's my issue, but why isn't it being defined? It could be that the game updating triggers it to be undefined in any given instance, adding a watch might not work when evaluating something that is being cleared and changed every 20 milliseconds.
why is this code not defining a block for my canvas?
Because you don't have a canvas.
A <script> element can load JavaScript in one of two ways.
Via a src attribute
Via JS placed between the start and end tags
This is your code:
<script type="text/javascript" src="/Users/cgoodwin/game/g.js">
window.onload = start;
</script>
Since the script is loaded via the src attribute, window.onload = start is ignored.
Since you never call start, the <canvas> element is never added to the DOM.
Move your second script so it is either:
part of the g.js
in a <script> element of its own
Hy
I'm very new to canvas, I'm trying to learn how to use fabricjs but I can't get even the very basic example to work and it's quite frustrating.
I downloaded the fabricjs-1.4.8.zip file and the only file I'm using is dist/fabric.min.js,
here is my html code
<html>
<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="fabric.js-1.4.8/dist/fabric.js"></script>
<script tye="text/javascript" src="test.js"></script>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"
style="border:1px solid #000000;">
</canvas>
</body>
</html>
In first place I didn't include jquery, but after seeing many examples looked like that could do the trick, but it didn't for me, maybe I'm including a wrong version?
and this is my test.js file
var canvas = new fabric.Canvas('myCanvas');
// create a rectangle with angle=45
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'red',
width: 20,
height: 20,
angle: 45
});
canvas.add(rect);
I can se the border of my canvas element, but no rectangle inside.
Can someone see what I'm doing wrong? thanks
It looks like your canvas is 200 x 100. But you're trying to draw a rectangle 100 pixels from the top. Your code probably works, but the rectangle doesn't show up because it's drawn at the bottom of the canvas. Try changing this line
top: 100
to this:
top: 0
UPDATE
If this doesn't work at first, it could be because the DOM hasn't loaded before your script runs. You can put your code in a jQuery document ready listener like so:
$(document).ready(function(){
//Your code here...
});
This will ensure that the canvas element is actually ready to be used by the time your script fires. Best of luck!
I'm working on a simple page that uses only <canvas> within the <body> of the page. All of the content is to be loaded through javascript. I am having trouble with using the document in my javascript and I was wondering if anyone could point me in the right direction of using <script> tags. Here is my main question:
What is the appropriate placement of <script> for a function loaded with window.onload
Here is the code I am working with:
index.html
----
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="window.js" type="text/javascript"></script>
</head>
<body>
<canvas>Canvas is not supported by your browser!</canvas>
</body>
window.js
----
Window = function(doc, win)
{
this.doc = doc;
this.win = win;
this.initialize();
}
Window.prototype =
{
initialize: function()
{
this.doc.documentElement.style.overflow = 'hidden';
this.doc.body.scroll = "no";
this.resize();
this.win.addEventListener('resize', this.resize.bind(this));
},
resize: function()
{
_canvas = this.doc.querySelector('canvas');
_canvas.width = this.win.innerWidth;
_canvas.height = this.win.innerHeight;
}
};
window.onload = new Window(document, window);
In all the tests of this script I have run, the only instance where it works is when the <script> is placed after the initial <body> tag. When I place the <script> in the <head> it gives me an error saying:
Uncaught TypeError: Cannot set property 'value' of null
Is it not a possibility for the sake of a clean looking document to have <script> be in the <head>?
Any clarification or direction on what the proper practice is would be greatly appreciated!
Script tags should go at the bottom of the page typically. This ensures all content has loaded and is ready for interaction...
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas>Canvas is not supported by your browser!</canvas>
<script src="window.js" type="text/javascript"></script>
</body>
</html>
If you don't put the script in after the element, as far as your script is concerned, that element does not exist. It needs to be in the bottom, or at least after the canvas element.
In your case, it should be in the bottom, after the <canvas> element.
It really doesn't matter where your JS files are loaded. Your problem is that the JS files could possibly load before your DOM is fully drawn. I've had pages where JS at the bottom of the page was executing before the browser was done loading the middle. That's why every JS framework contains something to check if the DOM is ready or not. in jQuery you would use ready
$(document).ready(function() { alert('My DOM is loaded!'); });
Outside of jQuery, you could use DOMContentLoaded. Put this at the bottom of your window.js file and you can load it in your header without issue.
document.addEventListener("DOMContentLoaded", function(event) {
new Window(document, window);
});
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>