Add class to canvas element HTML5 & CreateJS

Question

I am generating 5 circles with a for loop in a canvas and I want to give them a class so I can control them with jquery, but I am doing something wrong. Can you guys figure out what's happening?

var stage;
var quantity = 6,
    width = 60,
    height = 60,
    circles = [];

function init(){
    stage = new createjs.Stage("myCanvas");
    stage.width = 500;
    stage.height = 600;
    createjs.Ticker.setFPS(60);
    createjs.Ticker.addEventListener("tick", onTick);
    setupGame();
}

function setupGame() {
    for(var i = 0; i < quantity; i++) {   
         var circle = document.createElement("img");
         circle.setAttribute('src', 'images/circles/circle'+i+'.png');
         circle.className = "circle";
         circle.style.position = "absolute";
         circle.style.left = Math.floor((Math.random() * 100)) + "%";
         circle.style.top = Math.floor((Math.random() * 100)) + "%";
         circle.style.width = width + "px";
         circle.style.height = height + "px";
         document.body.appendChild(circle);
         circles.push(circle);
    }
}

function onTick(e){
    stage.update(e);
}

NEW VERSION. With the help from JonnyD, I now have a functional loop. The only problem is that the images get appended to the body, and not to my stage. I have tried stage.appendChild(circle), but it's not working.

Here is a link to an online source so you guys can check it out = LINK

circles aren't DOM objects, you should use methods relative to createjs library instead. You should read the DOC and see, unfortunately, i cannot help you more on this — A. Wolff, Jan 14 '15 at 13:01
Actually what I am trying to achieve is to be able to change the background position of the images/circles (they are png's) through css 3 seconds after they are rendered. But I first tried simpler things like hiding and showing them. Any ideas? — SimeriaIonut, Jan 14 '15 at 13:04
You may achieve using jCanvas layers (using "name" as ID and "groups" as classes) — nicolallias, Jan 14 '15 at 16:05

score 3 · Answer 1 · answered Jan 14 '15 at 14:17

A lot is wrong with your code.

You are trying to add properties to strings within an array which is not possible. Properties are added to objects using dot or bracket notation..

Dot notation

foo.bar.baz

Square bracket notation

foo['bar']['baz']

What I think you want to do is create five circles on the 'screen' or more technically correct DOM (https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) at random positions with set H&W of 60px with classnames of myClass..

I have rewritten your code for you, you can remove the style javascript lines and add them in the CSS if you wish.. All you were really doing wrong was attempting to add properties to array values, wrong technique for the code and missing off .style before width, height. Note You add className's and width and height attributes to DOM elements only.

You can now access the individual circles through a for loop and the circles array or by using the nth-child selector with CSS. e.g .circle:nth-child(1) {animation/transition}

var quantity = 5,
    width = 60,
    height = 60
    circles = [];

function setUp() {
    for(var i = 0; i < quantity; i++) {   
         var circle = document.createElement("div");
         circle.className = "circle";
         circle.style.position = "absolute";
         circle.style.left = Math.floor((Math.random() * 100)) + "%";
         circle.style.top = Math.floor((Math.random() * 100)) + "%";
         circle.style.backgroundColor = "black";
         circle.style.width = width + "px";
         circle.style.height = height + "px";
         circles.push(circle);
         document.body.appendChild(circle);
    }
}
setUp();

.circle {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
}

Okay, you made things a lot more clear to me, thank you a lot for that. However, what I want to achieve is right here: http://simeriaionut.com/keafocus/ . I want those circles to be png's and be able to use them in my canvas. I am using CreateJS for that. So the question is, how can I use images instead of generated shapes and how can I integrate them in my canvas? — SimeriaIonut, Jan 14 '15 at 14:39

score 2 · Answer 2 · answered Jan 14 '15 at 16:02

I didn't see you were using CreateJS.. in that case using the notation like so is okay..

var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

ensure that you update the stage as well.

stage.update();

score 1 · Answer 3 · answered Oct 24 '19 at 20:37

I realize this question has been answered, but since I clicked on this for trying to find out how to add a class to a canvas object in jquery, I'll post how to do that.

var thing = canvas_object;
$('body').append(thing);
var canvas = $('canvas');
canvas.addClass('test');

score 0 · Answer 4 · answered Jan 14 '15 at 14:28

0

Things inside canvas are not in DOM, but elements in Scalable Vector Graphics images are, and can be manipulated this way.

Try using SVG if convenient. svg.js is a lightweight library to manipulate SVG.

answered Jan 14 '15 at 14:28

pii_ke

2,811
2
20
30

Add class to canvas element HTML5 & CreateJS

4 Answers4

Linked

Related