How do I center my clock in Animate CC 2017?

[HUnknown1]

Hi There,

I am trying to rebuild the canvas clock example on W3schools website in animate CC. However when I use the code my clock ends up in the upper left rather than centered on my canvas. Is there a simple way to correct this?

The canvas is 400px with and 400px height. Background #333;

I tried to set most of the radius to 200,200 but this messes up the arms of the clock for some reason. Animate does not let me set the center of the Stage to 0 for the HTML 5 canvas .

This is the code I put into the Actions Panel. Any thoughts?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//setInterval(drawClock, 1000);--- this cause the clock to flash and stall
setInterval(drawClock);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  ctx.arc(0, 0, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

[Colin Holgate]

Publish Settings have options for making it be responsive. If you can use those it will save a lot of coding.

[HUnknown1]

Yeah I tried center stage in publish settings. However that only centers the canvas itself in the HTML 5 file not the clock itself on inside. Here is a screen shot of what I get when I do that. Only a quarter of the clock.

I just want to know what to change in the code to get the clock to sit in the center of canvas. I tried changing the position to 200,200, but when I do that for the draw hands they it don't function correctly.

[ClayUUID]

Why are you trying to port something into Animate that doesn't use any of Animate's features? Seems like learning all the wrong lessons.

[HUnknown1]

Eventually it will become part of something that will be part of something else with Animate features. However I want the clock to center before I go further in my project. If you don't know the answer that's OK. Maybe some one else does. What we think are wrong lessons sometimes lead  to greater discoveries.

I was able now to get 2 clocks on stage One centers and one is off to the lower right. However I only want one clock. Here is the code so far: Anyone else have a suggestion?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//
setInterval(drawClock);

function drawClock() {
  drawFace(ctx, radius);
  drawNumbers(ctx, radius);
  drawTime(ctx, radius);
}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  //ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.arc(200, 200, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();

grad = ctx.createRadialGradient(200,200,radius*0.95, 200,200,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();

ctx.arc(200, 200, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
 
ctx.fillText(num.toString(), 200, 200);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){

// this line makes 2 clocks appear
ctx.translate(200, 200);
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);

}

function drawHand(ctx, pos, length, width) {
    ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0, -length);
    ctx.stroke();
    ctx.rotate(-pos);
}

[Colin Holgate]

I think that your Canvas example code, which uses the canvas 2D context directly is clashing in some way with CreateJS, which is also directly using the 2D context too.

See if the answer given here is of use:

javascript - createjs html5 canvas integration not working - Stack Overflow

[HUnknown1]

Possibly in some instances. I understand they want you to use the createJS Library.  However it does not really answer the question of why just the arms of the clock won't center.

In the new code I got the arms to center properly but now 2 clocks appear on the stage when I only want one.

If CreateJS has a tutorial for clocks that would be good

[Colin Holgate]

I think that most of the math in the non-CreateJS version will be useful. You need to draw into a graphics thingy instead of a 2D context. CreateJS will take care of the making it visible part.

See this article:

EaselJS v0.8.2 API Documentation : Graphics

[HUnknown1]

I tried the first code on the graphics list you showed me and copied it directly into the actions panel to test it. In a new document.

But it did not appear to draw anything. When I went to test.

var g = new createjs.Graphics();

g.setStrokeStyle(1);

g.beginStroke("#000000");

g.beginFill("red");

g.drawCircle(0,0,30);

I could draw most of clock in animate. The area that I want to fix is the location of the arms

[HUnknown1 · Accepted solution]

Ok so after struggling with the code and making a few modifications I think that I got it to work in Animate.

Below is final code I entered into the actions panel. I realize it probably would work better with the createJS Library, but until I see them or Adobe create a full tutorial for making a working clock, it will have to do. At least now I'm not getting 2 clocks. As mentioned earlier, I would probably draw the face of the clock as a Symbol in Animate. However at least the Numbers and moving arms are in the correct coordinates..

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
//setInterval(drawClock, 1000);
setInterval(drawClock);

function drawClock() {
drawFace(ctx, radius);
   drawNumbers(ctx, radius);
drawTime(ctx, radius);
//fixes position
ctx.translate(0,0);
ctx.translate(200,200);

}

function drawFace(ctx, radius) {
  var grad;
  ctx.beginPath();
  //ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.arc(200, 200, radius, 0, 2*Math.PI);
  ctx.fillStyle = 'white';
  ctx.fill();
  //grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad = ctx.createRadialGradient(200,200,radius*0.95, 200,200,radius*1.05);
  grad.addColorStop(0, '#333');
  grad.addColorStop(0.5, 'white');
  grad.addColorStop(1, '#333');
  ctx.strokeStyle = grad;
  ctx.lineWidth = radius*0.1;
  ctx.stroke();
  ctx.beginPath();
  //ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.arc(200, 200, radius*0.1, 0, 2*Math.PI);
  ctx.fillStyle = '#333';
  ctx.fill();
}

function drawNumbers(ctx, radius) {
  var ang;
  var num;
//fixes position
ctx.translate(0,0);
ctx.translate(200,200)
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(), 0, 0);
//ctx.fillText(num.toString(), 200, 200);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }
}

function drawTime(ctx, radius){
    var now = new Date();
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    //hour
    hour=hour%12;
    hour=(hour*Math.PI/6)+
    (minute*Math.PI/(6*60))+
    (second*Math.PI/(360*60));
    drawHand(ctx, hour, radius*0.5, radius*0.07);
    //minute
    minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
    drawHand(ctx, minute, radius*0.8, radius*0.07);
    // second
    second=(second*Math.PI/30);
    drawHand(ctx, second, radius*0.9, radius*0.02);
}

function drawHand(ctx, pos, length, width) { 

ctx.beginPath();
    ctx.lineWidth = width;
    ctx.lineCap = "round";
    ctx.moveTo(0,0);
    ctx.rotate(pos);
    ctx.lineTo(0,-length);
    ctx.stroke();
    ctx.rotate(-pos);


}