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
5
votes
1 answer

EaselJS - Rotate a shape around its center

I'm making a rotating rectangle with EaselJS but it doesn't work like I thought. As I think, if I want to make a square (40x40) which rotates around its center at position x=100, y=100, I will need to set it's registration point to regX=20,…
Thịnh Phạm
  • 2,528
  • 5
  • 26
  • 39
5
votes
2 answers

Z-Index positioning with CreateJS

I'm trying to set the z-index for my line Graphic(). I'm trying to set the line to be always behind the other two shapes. As far as I know, the first element added is z=0, the second one is z=1 and so on. Is that so? Is z=0 the top possition or is…
Cod1ngFree
  • 1,873
  • 6
  • 21
  • 33
5
votes
1 answer

EaselJS: Can somebody explain the inheritance pattern used in demos?

I'm creating a game using EaselJS, and I'm wondering if somebody can explain how the inheritance pattern used in the demo files works. Specifically, I'm looking at the following file:…
Dan Quinn
  • 111
  • 2
  • 6
5
votes
1 answer

Sluggish movement in Firefox using EaselJS library

I would like to know why this simple ball moving code runs smooth in IE and Chrome and in Firefox it appears sluggish, although it maintains the same FPS rate. What would I have to do to achieve the same smooth movement across all browsers? var…
5
votes
2 answers

Speed of large amount of animated bitmaps in EaselJS

I seem to have a bit of trouble with using a large amount of animated bitmaps (all based on the same spritesheet) when using EaselJS. When I run a couple of these at once on my stage, there is no problem at all, but when running a higher amount of…
Kristof
  • 131
  • 2
  • 5
5
votes
3 answers

How to find the width and height of a DisplayObject in EaselJS

var tf = new Text(letter, font, color); var tfContainer = new Container(); tfContainer.addChild(tf); How can I find out what are the dimensions of the 'tfContainer'? I know I can use tf.getMeasuredWidth() and tf.getMeasuredLineHeight() but I'd…
strah
  • 6,702
  • 4
  • 33
  • 45
4
votes
1 answer

easeljs mouse events on disabled stage curosr

In my simple application i need to hide original cursor stage.cursor = 'none'; stage.enableMouseOver(), than i replace it with my own image Than i register listener on stagemousemove event: myBitmap.x = stage.mouseX; myBitmap.y =…
Nitromoon
  • 378
  • 1
  • 2
  • 11
4
votes
4 answers

What does ||{} mean in javascript?

I'm working on a project using Easel JS. Opened up the Easel file and the very first line of code confused me: this.createjs = this.createjs||{}; I know that createjs is invoked when you're setting up your canvas or, for example, creating a bitmap…
unaesthetic
  • 108
  • 1
  • 8
4
votes
1 answer

Combining EaselJS and TweenJS for Fade Over Time

I have a working animation that uses only EaselJS to load and display images. The whole animation works quite well, but images appear and disappear immediately. I would like them to fade in and out over time. Here's a small jsfiddle that might…
Jake
  • 3,142
  • 4
  • 30
  • 48
4
votes
1 answer

How to draw a circle using arcs in createjs?

How to draw an arc in createJS. I have gone through arcTo function but its not what i want. I want to be able to draw several arcs which when put together resembles a circle. for Ex: I want to be able to draw a circle using 8 arcs. not able to do…
user3454558
  • 279
  • 2
  • 6
  • 11
4
votes
1 answer

Javascript collision detection system don't ignore blocked collisions

I'm having issues during a minigame development using EaselJS with my collision detection system and I need someone's help. The issue occurs when the hero (a circle bitmap) collides an object and there's other object behind the first one, the hero…
Tiago Marinho
  • 2,146
  • 17
  • 37
4
votes
2 answers

drag element on canvas

I draw an element onto a canvas as a string. I then want to be able to click the element (or tap on a mobile device) and drag it around. What I have now is:
user3266510
  • 81
  • 1
  • 5
4
votes
2 answers

Easeljs: show pointer cursor when mouse is on shape's bounds

I am trying to achieve something similar to the code below. When user is on the edge of a rectangle, the cursor points a pointer, otherwise cursor is an arrow. shape.graphics.beginStroke("#000").beginFill("#daa").drawRect(50, 150, 250, 250); …
user1972450
4
votes
1 answer

Infinite canvas with EaselJS

Is there any way to display an infinite canvas with EaselJS? I have read the ways to do it with Javascript or JQuery, but is there any way to manage it with EaselJS? Thanks!
Cod1ngFree
  • 1,873
  • 6
  • 21
  • 33
4
votes
5 answers

How to change bitmap width and height in easeljs?

I am using easeljs to create HTML5 page. I have to load the images in canvas. How to change the width and height of the bitmap i am loading. var img = new Image(); img.src = image_path+images; // image from folder var loading_img = new…
sathya
  • 87
  • 2
  • 2
  • 10
1 2
3
67 68