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>
Related
I want to communicate between two animated canvas elements.
I’ve made two html5 canvas js animations with Adobe Animate CC. I’ve put both of these elements into one html page. I can successfully call functions from within those animations – the alerts are triggered successfully in the code below.
I want to call functions from one animation to control the other animation. I need help knowing how to correctly call/name/address the animations. So far I get no response with the canvas_ship.gotoAndPlay(12); and canvas_car.gotoAndPlay(7);, and I've spent hours trying different references. I’m not a big coder, but I’m sure this is a simple matter. Any help is appreciated!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Multiple Canvas Animations Talking to Each Other</title>
<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="ship.js"></script>
<script src="car.js"></script>
<script>
function init () {
var canvas, stage, exportRoot;
canvas = document.getElementById("canvas_ship");
exportRoot = new libs_ship.ship();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_ship.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
canvas = document.getElementById("canvas_car");
exportRoot = new libs_car.car();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(libs_car.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function tell_Ship_what_frame_to_go_to(){
alert("tell_Ship_what_frame_to_go_to was triggered");
canvas_ship.gotoAndPlay(12); //This line does not work.
}
function tell_Car_what_frame_to_go_to(){
alert("tell_Car_what_frame_to_go_to was triggered");
canvas_car.gotoAndPlay(7); //This line does not work.
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas_ship" width="300" height="250" style="background-color:#FFFFFF"></canvas>
<canvas id="canvas_car" width="300" height="250" style="background-color:#FFFFFF"></canvas>
</body>
</html>
I've received help and will now share the answer. You are welcome. Just invite me over for dinner sometime.
In Adobe Animate, you'll need to change the library namespace (in the Publish settings in the Advanced tab I think) to lib_jerry or whatever custom name you come up with... so long as it's different than the other animation. Then just follow the setup in this code. You can call the functions from within the Animate animations.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Container</title>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="tommy.js"></script>
<script src="jerry.js"></script>
<script>
var canvas, stage, tomtom, jerjer;
function init() {
var exportRoot;
//Tommy
canvas = document.getElementById("canvas_tommy");
tomtom = new lib_tommy.tommy();
stage = new createjs.Stage(canvas);
stage.addChild(tomtom);
stage.update();
createjs.Ticker.setFPS(lib_tommy.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Jerry
canvas = document.getElementById("canvas_jerry");
jerjer = new lib_jerry.jerry();
stage = new createjs.Stage(canvas);
stage.addChild(jerjer);
stage.update();
createjs.Ticker.setFPS(lib_jerry.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
function button_from_tommy_was_clicked(){
tomtom.gotoAndPlay(5);
}
function button_from_jerry_was_clicked(){
jerjer.gotoAndPlay(5);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
<canvas id="canvas_tommy" width="970" height="90" style="background-color:#727272"></canvas>
<canvas id="canvas_jerry" width="970" height="90" style="background-color:#727272"></canvas>
</body>
</html>
I am using EaselJS and my task is to move a .png from right to left.
Since I bumped into an error I can't fix, I copied a work with the same goal and using createjs.Ticker.addListener to keep everything updated. I opened the other index.html with the included javascript and it worked perfectly. I proceeded to use this code as an example, but used my graphics. It is almost the same code, but it still tells me "TypeError: createjs.Ticker.addListener is not a function" I have no idea why the example works fine, but my code screws up like that.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/easeljs.js"></script>
<script>
var canvas, stage, child;
function draw () {
canvas = document.getElementById("canvas");
stage = new createjs.Stage( canvas );
var bg = new createjs.Bitmap( "bg.png" );
stage.addChild( bg );
var child = new createjs.Bitmap( "target.png" );
child.onTick = function ()
{
this.x --;
}
stage.addChild( child );
child.y = 100;
child.x = 100;
createjs.Ticker.useRAF = true;
createjs.Ticker.setFPS( 1 );
createjs.Ticker.addListener( stage , true );
createjs.Ticker.addListener( window , true );
}
</script>
</head>
<body onload="draw()">
<canvas id="canvas" width="650" height="400" style="background: #ccc;"></canvas>
</body>
</html>
EDIT
The error has been found. It wasn't the code, it was the easelJS-library itself that made the complications. I used a different version of the library and it worked. Thank you anyways :).
The function you are after is addEventListener
like this:
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
stage.update();
}
CreateJS Ticker Documentation
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);
}
<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.
<!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.