I am trying (and failing) miserably with Easel JS and Canvas. I'm a bit new to canvas in general and learning JS as well. I am basically trying to make a canvas that I can update with colors, that are passed through a button click.
I have made a Fiddle to show my work so far.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>IllustratorSetup</title>
<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<script>
var stage = new createjs.Stage("canvas");
var circle = new createjs.Shape();
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
stage.addChild(rect);
stage.update();
}
function drawShapes(){
drawRectangle();
stage.update();
}
</script>
</head>
<body onload="drawShapes()">
<canvas id="canvas" width="500" height="300"></canvas>
<button onclick="drawRectangle('#ff0000')">Click me for red</button>
</body>
</html>
Your demo likely doesn't work because you are defining your stage before the body onload, and passing it the ID of your canvas (which uses a document.getElementById under the hood). The canvas element won't be available until it is created in the body.
I recommend moving your code that isn't in a function to an init(), or even put it into the drawShapes method.
var stage, circle; // Keep them global
function drawRectangle(){
var rect = new createjs.Shape();
rect.graphics.beginFill("#000").drawRect(10, 10, 80, 80);
stage.addChild(rect);
//stage.update(); // Unnecessary, since it is called in drawShapes.
}
function drawShapes(){
stage = new createjs.Stage("canvas");
circle = new createjs.Shape();
drawRectangle();
stage.update();
}
You can also define your scripts in the body, after the canvas element, so that they initialize after the element is ready.
Note that your fiddle doesn't have the createjs libraries in it, and that JSFiddle will fire the code part of the fiddle during the onload event, so you may not see the issue you are having locally.
Related
I have two canvases. I'd like to draw a green circle on the first canvas when clicking on it and a red circle when clicking on the other canvas.
The code below works only for the first canvas. I'd like to know how I can pull off my original idea.
HTML:
<!DOCTYPE html>
<html>
<head>
*** Import jQuery + Paper.js ***
</head>
<body>
<canvas id='firstCanvas'></canvas>
<canvas id='secondCanvas'></canvas
</body>
</html>
JS:
$(document).ready(function() {
paper.install(window);
paper.setup(document.getElementById('firstCanvas'));
var tool = new Tool();
tool.onMouseDown = function(event) {
var c = Shape.Circle(event.point.x, event.point.y, 20);
c.fillColor = 'green';
};
paper.view.draw();
});
Thank you in advance.
With kind regards,
You could use PaperScope, and activate each scope with scope.activate() then draw in the activated scope.
It's in the paper.js docs here http://paperjs.org/reference/paperscope/
This is my easel js function, it draws a red circle and an image, however the circle is showing but the image isn't.
function Start() {
var stage = new createjs.Stage("DogeCanvas");
var dog = new createjs.Bitmap("doge.jpg");
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
dog.x=100;
dog.y=100;
stage.addChild(circle, dog);
stage.update();
}
And this is the html file
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="Doge.js"></script>
</head>
<body bgcolor="#C7C7C7" onload="Start();">
<canvas id="DogeCanvas" width="480" height="320"></canvas>
</body>
</html>
Why? help please, seems like in everyones else code this works but why this isn't working for me?
The image is likely not loaded yet.
You can add a Ticker to the stage to constantly update it (which most applications do, since there is other things changing over time)
Example:
createjs.Ticker.on("tick", stage);
// OR
createjs.Ticker.addEventListener("tick", stage);
// OR
createjs.Ticker.on("tick", tick);
function tick(event) {
// Other stuff
stage.update(event);
}
Listen for the onload of the image, and update the stage again
Example:
var bmp = new createjs.Bitmap("path/to/image.jpg");
bmp.image.onload = function() {
stage.update();
}
Preload the image with something like PreloadJS before you draw it to the stage. This is a better solution for a larger app with more assets.
Example:
var queue = new createjs.LoadQueue();
queue.on("complete", function(event) {
var image = queue.getResult("image");
var bmp = new createjs.Bitmap(image);
// Do stuff with bitmap
});
queue.loadFile({src:"path/to/img.jpg", id:"image"});
I've started to learn how to use CreateJS. I'm trying to make a simple text tweening. So I have this code:
<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script>
function init() {
var c = createjs;
var stage = new c.Stage("myCanvas");
var txt = new c.Text("Hola!", "bold 16px Arial");
txt.alpha = 0.2;
stage.addChild(txt);
c.Tween.get(txt)
.to({alpha:1}, 1500)
.to({text:"Ciao!"}, 800)
.to({rotation:360, text:"Hello"}, 1300)
.to({y:380}, 2000, c.Ease.bounceOut)
.wait(1000)
.call(alert, ["Done animating!"], window);
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="myCanvas" width="300" height="400">Canvas not supported</canvas>
</body>
I see my text on the canvas, it has alpha 0.2, it even pops up the alert in the end, but I don't see any motion on the canvas. What am I doing wrong?
stage.update(); needs to be called repeatedly in order to correctly render animations, the most common way is to call it on every tick.
createjs.Ticker.addEventListener("tick", function() {
stage.update();
});
Add this to your code and then it should work properly.
Does anyone know the best way to clear a canvas using paper.js
I tried the regular canvas clearing methods but they do not seem to work with paper.js
Html
<canvas id="myCanvas" style="background:url(images/graphpaper.jpg); background-repeat:no-repeat" height="400px" width="400px;"></canvas>
<button class="btn btn-default button" id="clearcanvas" onClick="clearcanvas();" type="button">Clear</button>
Javascript/Paperscript
<script type="text/paperscript" canvas="myCanvas">
// Create a Paper.js Path to draw a line into it:
tool.minDistance = 5;
var path;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
function onMouseDown(event) {
// Create a new path and give it a stroke color:
path = new Path();
path.strokeColor = 'red';
path.strokeWidth= 3;
path.opacity="0.4";
// Add a segment to the path where
// you clicked:
path.add(event.point, event.point);
}
function onMouseDrag(event) {
// Every drag event, add a segment
// to the path at the position of the mouse:
path.add(event.point, event.point);
}
</script>
Regular clearing does not work because paper.js maintains a scene graph and takes care of drawing it for you. If you want to clear all items that you have created in a project, you need to delete the actual items:
project.activeLayer.removeChildren(); works as long as all your items are inside one layer. There is also project.clear() which removes everything, including the layer.
In case someone comes looking for an answer with little experience in Javascript, I made a simple example :
1) As Jürg Lehni mentioned project.activeLayer.removeChildren(); can be used to remove all items inside active layer.
2) To reflect the cleaning you have to call paper.view.draw();.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Circles</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="paper-full.js"></script>
<script type="text/paperscript" canvas="canvas">
function onMouseUp(event) {
var circle = new Path.Circle({
center: event.middlePoint,
radius: event.delta.length / 2
});
circle.strokeColor = 'black';
circle.fillColor = 'white';
}
</script>
<script type="text/javascript">
paper.install(window);
window.onload = function () {
paper.setup('canvas');
document.getElementById('reset').onclick = function(){
paper.project.activeLayer.removeChildren();
paper.view.draw();
}
};
</script>
</head>
<body>
<canvas style="background-color: #eeeeed" id="canvas" resize></canvas>
<input id="reset" type="button" value="Reset"/>
</body>
</html>
CSS :
html,
body {
margin: 0;
overflow: hidden;
height: 100%;
}
/* Scale canvas with resize attribute to full size */
canvas[resize] {
width: 58%;
height: 100%;
}
you can use project.activeLayer.removeChildren(); for clear entire layer,
or you can add your new paths to group and remove all childrens in group
var myPath;
var group = new Group();
function onMouseDown(event) {
myPath = new Path();
}
function onMouseDrag(event) {
myPath.add(event.point);
}
function onMouseUp(event) {
var myCircle = new Path.Circle({
center: event.point,
radius: 10
});
myCircle.strokeColor = 'black';
myCircle.fillColor = 'red';
group.addChild(myCircle);
}
// connect your undo function and button
document.getElementById('clearbutton').onclick = btnClear;
function btnClear(){
group.removeChildren();
}
c.width = c.width; ctx.clearRect(0,0,c.width,c.height); should be a good catchall if you've not tried it.
Beware however - setting canvas width will reset the canvas state including any applied transforms.
A quick google took me to https://groups.google.com/forum/#!topic/paperjs/orL7YwBdZq4 which specifies another (more paper.js specific) solution:
project.activeLayer.removeChildren();
How can I bind an event to a shape drawn on a canvas? I presumed this would work but I get an error.
<html>
<head>
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
var rec = ctx.fillRect (0, 0, 55, 50);
rec.onclick = function(){
alert('something');
}
}
</script>
</head>
<body onLoad="draw()">
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Put the event handlers on the canvas element, and then use the mouse position to decide which conceptual part of the canvas the event is occurring on.
I haven't played with canvas all that much, but I wouldn't be surprised if there were already some libraries that help you manage event delegation to such imaginary elements.
Using Kineticsjs, you can handle shape events in a canvas as follows:
<script>
shape.on('mousedown mouseover' function(evt) {
// do something
});
</script>
Sounds like you should be using svg instead since it allows you to add event listeners on shapes. I'd recommend checking out raphaeljs.com for a start.