Why isn't this HTML5 canvas displayed? - javascript

<!doctype html>
<html>
<head>
<title>Canvas test</title>
</head>
<body>
<script type="text/javascript">
c = getElementById('canvas');
ctx = c.getContext("2d")'
ctx.fillRect(10,10,10,10);
</script>
<canvas id="canvas" height ="100" width = "100"></canvas>
</body>
</html>
I have tried this on Chrome and IE 9, and neither of them display anything. Do you know why doesn't this work?
It's probably something stupid, and my friend is asking me to post this as he's too lazy to sign up, but I couldn't figure it out myself.

You need to put your code in a onload function.
For example:
window.onload = function() {
c = document.getElementById('canvas');
ctx = c.getContext("2d");
ctx.fillRect(10,10,10,10);
};
The reason for this is because you javascrpt code will be running before the <canvas> renders, and you want it to run afterwords.
Demo: http://jsfiddle.net/maniator/nCf7Y/

Syntax error here:
ctx = c.getContext("2d")'
Change to:
ctx = c.getContext("2d");
Also, you need to use the document object:
c = document.getElementById('canvas');

You're missing 'document'.
var c = document.getElementById('canvas');

The canvas is not there when the script is running. Move the <canvas> tag so that it is before the <script> tag.

Related

addEventListener 's malfunction on my computer's browser

I write code perfectly which was written in edu-book. However, it doesn't work!
I think window.addEventListener have occured the problem. When I amended code to other one which not used addEventListener func, js and html source work very well. I tried changing browsers (Chrome, Explorer) changing computers, but not on OS.
And also such as imgPlayer.addEventListener was not work too. I don't know why addEventListener doesn't work on browser.
JS:
window.addEventListener("load",drawScreen,false);
var imgBackground = new Image();
imgBackground.src = "img/background.jpg";
imgBackground.addEventListener("load",drawScreen,false);
var imgPlayer = new Image();
imgPlayer.src = "img/player.jpg";
imgPlayer.addEventListener("load",drawScreen,false);
function drawScreen()
{
var theCanvas = document.getElementsById("GameCanvas");
var Context = theCanvas.getContext("2d");
Context.fillStyle = "#000000";
Context.fillRect(0,0,800,600);
Context.drawImage(imgBackground,0,0);
Context.drawImage(imgPlayer,350,250);
}
HTML:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8" />
<title> 총알 피하기 </title>
<script src = "DodgeGame.js"></script>
</head>
<body>
<div style="position: absolute; top: 25px; left: 25px">
<canvas id="GameCanvas" width="800" height="600">
지원 ㄴㄴ해
</canvas>
</div>
</body>
</html>
The issue you are having is in this line:
var theCanvas = document.getElementsById("GameCanvas");
The method getElementsById() does not exist - it should be getElementById(). Replace the above line of code with this one:
var theCanvas = document.getElementById("GameCanvas");
And your code should work.
I think you need to declare your handler function inline
window.addEventListener("load", function(event) {
console.log("Tutte le risorse hanno terminato il caricamento!");
});

paper.js code not running

I have recently started working with Paper.js . Trying to use javascript directly i can't figure out why code below produces absolutely nothing when its running:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>paper1</title>
<script type="text/javascript" src="js/paper.js"></script>
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementById("myCanvas");
paper.setup(canvas);
var path = new paper.Path();
path.strokeColor = 'black';
var tool = new paper.Tool();
tool.onMouseDown = function(event) {
path.add(event.point);
}
paper.view.draw();
};
</script>
</head>
<body>
<canvas id="myCanvas" resize></canvas>
</body>
I would appreciate any idea
UPDATE
It works when i remove window.onload. Why is that happen?
Actually, something does show up. Try to click on the uper left most area of the canvas and the lines will show up. But if you click more on the bottom right, you will see that the lines are not added were you click but are shifted.
There seems to be a problem when using the resize attribute. Remove it and add the dimensions manually and it will work as inteded:
<canvas id="myCanvas" width="500" height="300"></canvas>

Canvas Not Rendering Properly: Why?

I was trying to construct an RPG out of html5 and Javascript with the <canvas> element; but I ran across a real stumper of an error: my code does not modify the <canvas> element at all.
<!DOCTYPE html>
<head>
<title>BoxRPG</title>
</head>
<body>
<h3>Box RPG</h3>
<canvas id="rpgCanvas" width = "200" height = "100" style = "border:1px solid #FF0000;">failMessage</canvas>
<script type = "text/javascript">
var c = document.getElementById("rpgCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000000";
</script>
</body>
</html>
I cannot for the life of me figure out this! Am I just being stupid and missing the obvious or is there some deeper problem with either code or my system.
fill style is not a fill command , you have to specify area to fill :
var c = document.getElementById("rpgCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
http://fiddle.jshell.net/ms7Lg/
if you seek advice , leave this all and start learning
http://jonobr1.github.io/two.js/
or maybe
http://snapsvg.io/

cant get HTML5 canvas to work on any browser

I have just started learning how to draw on using HTML5 canvas, I'm trying to make a simple square but all I get is a blank screen, I don't get errors in the chrome console either
<!Doctype html>
<html>
<head>
<title>Drawing to a canvas</title>
<script type="text/javascript" language="javascript" >
window.onload = draw;
function draw()
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect = (36,10,50,50);
}
</script>
</head>
<body>
<canvas id="canvas1" width="400" height="300">
This text is displayed if your browser
does not support HTML5 Canvas.
</canvas>
</body>
</html>
This seems quite simple but it just won't work for me!
One error is the one Elon pointed out, but you are using the fillRect wrong as well:
ctx.fillRect = (36,10,50,50);
should be:
ctx.fillRect(36,10,50,50);
Please debug before asking for help!
You've got syntax error because you forgot about { after function name.
function draw() {
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(0,200,0,1)";
ctx.fillRect(36,10,50,50);
}

The Image doesn't show up on the Canvas

<html>
<head>
<meta charset="utf-8">
<title>Game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
</head>
<body>
<div id ="beeld">
<canvas id ="stageCanvas" width="1024" height="576">
<script src ="javascript.js"></script>
</canvas>
</div>
</body>
</html>
This is my Html
//Javascript Document
var canvas = document.getElementById('stageCanvas');
var stage = new Stage(canvas);
var Background;
var imgBackground = new Image();
imgBackground.src ="images/bg.png";
Background = new Bitmap(imgBackground);
Background.x = 0
Background.y = 0
stage.addChild(Background);
stage.update();
And that's my js.
The image is 1024 by 576, so it should be fullscreen. The original is 2048 by 576. I was planning to do like the background would slide to left and repeat it self when it gets to the end.
So my question is, why doesnt the image show up on the canvas.
I'm a very new to this, so I'm sorry if I'm asking such an easy question.
PS: If I inspect the HTML, it DOESN'T show any errors and it DOES show that the image is being loaded. It's just not.. drawn.. I guess.
I'm getting frustrated, because I'm stuck here for a couple hours already.
I FOUND A WORKING CODE
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Easel simple game</title>
<script src="http://code.createjs.com/easeljs-0.4.2.min.js"></script>
<script>
var canvas;
var stage;
var bg;
var score;
var ghost;
function init() {
canvas = document.getElementById("StageCanvas");
stage = new Stage(canvas);
score = 0;
bg = new Image();
bg.src = "img/bg.png";
bg.onload = setBG;
}
function setBG(event){
var bgrnd = new Bitmap(bg);
stage.addChild(bgrnd);
stage.update();
}
</script>
</head>
<body onload="init();">
<canvas id="StageCanvas" width="1240" height="576"></canvas>
</body>
</html>
By the way this code is the work for someone else, so I don't take any credit.
This seems to work perfectly. But once I remove the
bg = new Image();
bg.src = "img/bg.png";
bg.onload = setBG;
it stops working.
Background = new Bitmap(imgBackground);
In HTML:
Try to move the script-tag of your javascript.js to right before the </body> or at least not into the <canvas>...</canvas>.
And another thing is: You have a space between src and = and id and =, that might cause problems in some browsers.
In JavaScript:
You need to execute the update-method with () otherwise that line will just be a listed reference to the update function.
stage.update();
And a second thing, that I noticed(though not part of the issue): You are using EaselJS 0.4.2, but 0.5.0 is already released, just in case you want to be up-to-date: http://code.createjs.com/easeljs-0.5.0.min.js ;-)
I'm having the same issue with EaselJS at the moment. While it might work for you, you can try and add a ticker which will automatically update the canvas:
createjs.Ticker.addListener(stage);
I was able to get the image to paint on the canvas after adding this, but as soon as I add any transforms to the image (scale, positioning, height, width) they are not applied prior to the image being drawn.
I've been scratching my head over this too.

Categories