CODEWITHSUNDEEP
javascriptjqueryhtmlcanvascreatejs
SimeriaIonut
SimeriaIonut

Reputation: 586

Add class to canvas element HTML5 & CreateJS

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

Upvotes: 3

Views: 9819

Answers (4)

Millar248
Millar248

Reputation: 401

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');

Upvotes: 1

JonnyD
JonnyD

Reputation: 71

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();

Upvotes: 2

pii_ke
pii_ke

Reputation: 2901

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.

Upvotes: 0

JonnyD
JonnyD

Reputation: 71

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%;
}

Upvotes: 3

Related Questions