Questions tagged [easeljs]

EaselJS is a JavaScript library for working with the HTML5 canvas element. Part of the CreateJS suite.

The new Canvas element in HTML5 is powerful, but it can be difficult to work with. It has no internal concept of discrete display elements, so you are required to manage updates manually. The EaselJS JavaScript library provides a retained graphics mode for a canvas including a full, hierarchical display list, a core interaction model, and helper classes to make working with Canvas much easier.

When asking EaselJS questions, you should:

  1. Read the EaselJS API Documentation.
  2. Search Stack Overflow to see if your question has already been answered. Include the text [easeljs] to match questions and answers tagged .
  3. Try to provide a minimalistic example online to illustrate. This is best done with Stack Snippets (the <> toolbar button), but if you like you can also use jsFiddle or JSBin provided you include all the code in the question (not just in jsFiddle/JSBin).
  4. Tag the question appropriately. Always include the tag, and use the other web development such as , , , where appropriate.
  5. Determine whether this problem is browser specific and be sure to note which in the question.
  6. Make sure your code can pass the list. JSHint or the more strict JSLint are excellent tools that determine whether your code contains common errors that will break your JavaScript program.

Resources


Related tags

1009 questions
4
votes
1 answer

EaselJS, Canvas, Bitmap image low quality and registration point not working

I just started using EaselJS for a project I'm working on and I'm a bit stuck with the Bitmap Class.. What I do is add a 3000 x 4000 image to the canvas / stage and let the user scale and rotate it. Mainly I'm using the following function: @width =…
Tim Baas
  • 6,035
  • 5
  • 45
  • 72
4
votes
1 answer

buttons on easeljs

Im just learning javascript (trying create a game for windows 8 ui). And this is my button on easeljs, but I think this code too (toooooo) ugly. Button must change texture on mouseEvents using one 3x texture of all button states. Maybe other…
IvanVlado
  • 63
  • 1
  • 5
3
votes
1 answer

Javascript/ Easeljs Adding Dynamic Text

I'm using HTML5 Canvas in Adobe Animate. I'm trying to write a function that allows me to drop a text message anywhere on the stage. Please see my code below. function newtext(TextToDisplay, xposition, yposition, textcolor, textfont) {var textvar…
3
votes
2 answers

How to fix preloaded assets not showing on canvas in createjs?

I'm trying to create an animation by setting a background to a canvas and then trying to move my assets over the background image. I'm able to display the background image in the canvas and also able to preload all my assets. However, I'm not able…
Steve Tom
  • 31
  • 2
3
votes
1 answer

Build a Coordinate System around Canvas Using EaselJS

Hey I am trying to build the following picture in canvas using the library:EaselJS. My Picture components are: two circles - yellow and red and a light green background several small black points a coordinate system from 0 to 1 with all the…
Brk
  • 1,247
  • 2
  • 23
  • 55
3
votes
0 answers

EaselJS calulate font size of text

The createjs.Text class provides the usage of lineWidth, lineHeight, maxHeight, maxWidth, etc.. I can define a custom font size for my text but i need to calculate it. Here is my code: var headline = new createjs.Text("", "30px Arial",…
oops
  • 179
  • 1
  • 8
3
votes
0 answers

Easeljs : Is there a way to convert SVG to Shape or JSON to Shape

I have a SVG data on the server and send this to the browser. I wanted to convert that SVG data to a Easeljs Shape object to masking operation. I can't find any good reference to do this. If SVG to Shape is impossible, is there any other way to…
LittleFunny
  • 8,155
  • 15
  • 87
  • 198
3
votes
2 answers

How to stop tween of element in CreateJS/TweenJS

I have multiple Tweens in CreateJS/TweenJS: createjs.Tween.get(elem1).to({..}); createjs.Tween.get(elem2).to({..}); In timeline, I need to stop one of Tweens. I tried: var tween1 = createjs.Tween.get(elem1).to({..}); var tween2 =…
zur4ik
  • 6,072
  • 9
  • 52
  • 78
3
votes
1 answer

How to replace a image path for base64 in this code?

I'm working to make a kaleidoscope effect in canvas, I'm using as example a code from: https://github.com/CreateJS/sandbox/blob/master/Kaleidoscope/demo.html (you can check it working on: http://sandbox.createjs.com/Kaleidoscope/demo.html) But when…
user3822492
  • 145
  • 1
  • 11
3
votes
0 answers

createjs - stage.mouseX

I had noticed that createjs latest builds(0.8.0 and 0.8.1) has bug. if you click few times out of canvas(stage) and after trying click inside its stops shows you correct stage.mouseX & mouseY. its always shows "old" values. this bug only on…
3
votes
0 answers

Incorrect mouse event zooming in windows surface using easeljs / createjs

I have a website that uses CreateJS and canvas. Some objects have associated a click event. Works well in browsers and mobile devices, except in windows surface. If I zoom in windows surface the click event is lost when the screen moves. Only works…
Juan Pablo
  • 81
  • 1
3
votes
1 answer

EaselJS, Matrix2D and wrap Image

I did this post asking your opinion about what JS library is better, or can do the work that I have shown. Since I'm not allowed to do that here I did a research and tried out EaselJS to do the work. So my question now have changed. I have this…
Wazhup
  • 97
  • 5
3
votes
1 answer

EaselJS - broken panning on zoomed image

I'm having trouble fixing panning in this example - it works fine unless you move the zoomed image and then zoom again(offset is set to default value and the view jumps to initial position - http://jsfiddle.net/p2Qzg/). Any ideas on how to fix that?…
Luke Gmys
  • 137
  • 1
  • 7
3
votes
1 answer

Different positonining of text element of createjs in different browsers

The is slight difference in the top position of text object rendered by firefox to other browsers in CreateJs while the shapes object does not show this difference. For instance, this.text = new cjs.Text("Click to Start", '500 47px…
NNS
  • 195
  • 1
  • 1
  • 9
3
votes
1 answer

EaselJS: connect 2 containers/shapes using a line

I want to be able to click on a container/shape and as I move the mouse a line that can be connected to another container/shape (with an arrow at one end) is drawn. Ideally I want this line to snap to the destination element. I'm new to EaselJS and…
Mossi
  • 997
  • 5
  • 15
  • 28