Spinning Wheel with HTML 5 canvas

Question

Im trying to get these 2 png images to simply rotate on my canvas. The images are larger than the canvas because I only want to show certain sections of the wheel as it rotates into the canvas. I got the pngs perfectly on the canvas, they are circular and aligned to the bottom and centered so that it only shows that section of the wheel. Im using createjs in my code with easl and tween. For some reason when I rotate my image, it does it from some random registration point. Is there a way I can get this image to rotate around its own center which is off the canvas area?

var CANVAS;
var STAGE;
var CTX;

var imageCount = 0;

var img1Obj = new Image();
var img2Obj = new Image();
var img3Obj = new Image();

var img1;
var img2;
var img3;

var box;

function init(){

    CANVAS  = document.getElementById("spinWheel");
    STAGE   = new createjs.Stage(CANVAS);
    CTX     = CANVAS.getContext('2d');  

    img1Obj.src = "img/iphone_wheel_outer.png";
    img2Obj.src = "img/iphone_wheel_middle.png";
    img3Obj.src = "img/iphone_wheel_inner.png";

    img1Obj.name = "img1";
    img2Obj.name = "img2";
    img3Obj.name = "img3";

    img1Obj.onload = loadImages;
    img2Obj.onload = loadImages;
    img3Obj.onload = loadImages;

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addListener(STAGE);

}


function loadImages(e)
{
    if(e.target.name == 'img1'){img1 = new createjs.Bitmap(img1Obj); }
    if(e.target.name == 'img2'){img2 = new createjs.Bitmap(img2Obj); }
    if(e.target.name == 'img3'){img3 = new createjs.Bitmap(img3Obj); }

    imageCount++;

    /* Display graphics until all of them are loaded */

    if(imageCount == 3)
    {
        buildInterface();
    }
}

function buildInterface(){


    img1.x = -370;
    img2.x = -370;
    img3.x = -370;

    img1.y = 235;
    img2.y = 235;
    img3.y = 235;

    createjs.Tween.get(img1,{loop:true})
            .to({rotation : 360}, 2000);


    STAGE.addChild(img1, img2, img3, box);

}

$(document).ready(function() {
    init();
}); 

Answer 1

I finally figured it out.

The answers on here telling me to rotate the context are not wrong it just doesnt work if Im using createjs.Bitmap to generate images in canvas. However, it is actually a lot simpler by using createjs libraries. All I have to do is:

img1.regX   = img1.image.width/2|0;
img1.regY   = img1.image.height/2|0;

This actually targets the registration point of the bitmap directly, no need for me to manipulate the context since the createjs.Bitmap object takes care of this internally for me.

Thanks for the help anyways!

Answer 2

To rotate on the canvas, you have to do the following:

context.translate(cx, cy);
context.rotate   (radians);

But I am not sure if it will work with the createjs.Bitmap object, have to try it. The translate will set the point to rotate around.

maybe try:

img1.translate((.5*img1.width),(.5*img1.height));

img1.height has to work for this to work.

Answer 3

I did not see the css above, but the issue is probably the transform-origin property

Link to read more: http://www.w3schools.com/cssref/css3_pr_transform-origin.asp

div
{
transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-moz-transform-origin:20% 40%; /* Firefox */
-o-transform: rotate(45deg); /* Opera */
-o-transform-origin:20% 40%; /* Opera */
}