0

I am trying to get some knowledge in html and canvases, and i am stuck with a little problem. My canvas has a circle on top and 2 buttons below it. One button can be clicked whereas the other is an input button. What I have to do is that i should be able to type in the second button and when the first button is clicked, the first button's value should be changed to the value typed in second button. That click should also move the circle in x axis. I did the movement part, can anyone help me out with the input buttons inside the canvas?

Here's the part of my code, here i tried to put buttons outside the canvas, but i need them in the canvas, not as the html buttons though:

<script>


  var stage;


  function init() {
    stage = new createjs.Stage("myCanvas");




    var cbgColor = new createjs.Shape();
    cbgColor.graphics.beginFill("#000000").drawRect(0,0, stage.canvas.height,stage.canvas.width);
    stage.addChild(cbgColor);

    var ball = new createjs.Shape();
    ball.graphics.beginFill("#ff0000").drawCircle(0,0,50);
    ball.x=100;
    ball.y=200;
    stage.addChild(ball);


    createjs.Ticker.addEventListener("tick",tick);
    createjs.Tween.get(ball,{loop:false}).to({x:650}, 3000).to({x:100},1);

  }

    function tick(event){
      stage.update();


  }
   function handleClick(event){
   console.log("clicked");

 }

</script>
</head>
<body  bgcolor="black" onload="init()">
  <canvas id="myCanvas" height=300 width=600>
  </canvas><br>


  <script>
  function change()
      {
          var inp = document.getElementById('ip').value;
          document.getElementById('add').value = inp;
          console.log("clicked");
          document.getElementById('ip').value=null;
      }

</script>

  <input id="add" value="Go!" type="button" onclick="change();init();" style="background-color:yellow;font-size:30px;width:110px;height:40px;margin-left:250px"><br>

  <br><input type="text" id="ip" style="background-color:black;color:white;font-size:30px;width:140px;height:40px;margin-left:230px">
Deepak Bhandari
  • 1
  • 3
  • It seems quite unclear to me, could you attach some sample of the code you have right now? Like, are you talking about a `` element ? and about an `` one ? Then I'm curious about how you did manage to get the later in the former. – Kaiido Aug 10 '15 at 12:08
  • I want to get the above implementations inside the canvas. – Deepak Bhandari Aug 10 '15 at 12:19
  • Ok, so first, you have to understand that ``is an element which allows you to draw graphics in it. It means it's like an `` element, where you can program the image, and thus make some animations in it etc. Here you want to draw html elements in it. even if it would be possible to mimic the behaviour of those elements inside the canvas, I'm not sure that it would be a great idea if you're not used to canvas. Instead, you'd probably be better to just use CSS absolute positioning over the canvas. – Kaiido Aug 10 '15 at 12:26
  • I made a rectangle in the canvas and added an eventlistener, the first button problem is kind of solved. But the main problem is, is it possible to type inside a canvas? I mean typing inside a container by the user and using that input somewhere else. – Deepak Bhandari Aug 10 '15 at 12:33
  • well you can draw the text typed using `context.fillText()` and you can just store the typed text in a variable (or in an hidden ``). [This](http://stackoverflow.com/questions/29504481/formatting-text-on-html-canvas/29510173#29510173) may help you. – Kaiido Aug 10 '15 at 12:36
  • I recommend using a DOM element for text input, and controlling it using the EaselJS DOMElement class, which helps manage its transformation/position by treating it like it's part of the stage. http://www.createjs.com/docs/easeljs/classes/DOMElement.html – Lanny Aug 11 '15 at 02:21

0 Answers0