Create shape in loop with Canvas - calculator -solved

1

Hi,
I want to create 16 square with Easeljs for the project calculator:
The problem in my loop it’s with the position x, I’d like to position every 4 shape at 0 absolus and not relative

function init() {
  let stage, iphone, rectangle, shape , posyShape, posxShape
  stage = new createjs.Stage("demoCanvas");
  iphone = new createjs.Bitmap("iphone.png");
  rectangle = new createjs.Shape();

  // enabled mouse over / out events
  createjs.Touch.enable(stage);
  stage.mouseMoveOutside = true; // keep tracking the mouse even when it leaves the canvas

  iphone.x=0;iphone.y=0;
  circle.graphics.beginFill("red").drawCircle(0, 0, 50);
  rectangle.graphics.beginFill("orange").drawRect(0,0,200, 100);
  rectangle.x = 100;
  rectangle.y = 100;
  stage.addChild(iphone, rectangle);
  stage.update();
  posyShape=51
  posxShape=51
  for (var i = 0; i < 15; i++) {
    shape = new createjs.Shape();
    shape.graphics.beginFill('red').drawRect(50,0,50, 50);
    if (i % 4 === 0) {
      posyShape += 51;
      shape.x = 0
    } else{
    } 
    console.log(posyShape );
    shape.y = posyShape;
    //shape.x = posxShape*i
    shape.x = 51*i
    stage.addChild(shape);
  }
  stage.update();

}
init()

html/jade

//- utils.jade
mixin script(src)
  script(type='text/javascript', src=src)

mixin style(href)
  link(rel='stylesheet', type='text/css', href=href)


doctype html
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    +style('style.css')
    
    title Xavier 

  body(onload='init();')
    div.container
      img(src='', alt='')
      canvas#demoCanvas(height=981, width=481)
        | fallback init

    +script('https://code.createjs.com/easeljs-0.8.2.min.js')
    +script('script.js')
2

found it:

  function square(num, posx, posy) {
    for (var i = 0; i < num; i++) {
      shape = new createjs.Shape();
      shape.graphics.beginFill('red').drawRect(50,0,50, 50);
      shape.x = posx*i
      shape.y = posy
      stage.addChild(shape);
    }
    stage.update();
  }
  for (let i = 0; i < 2; i++) {
    square(5, 51, i*51)
  }
1 Like