1

I need help trying to rotate the rectangle that I have drawn on the canvas. I would like the top of the rectangle to pivot either to the right or left once I press on the arrow keys on my keyboard. This is my code so far:

Canvas

HTML:

  <body >
    <div id="canvas-container">
      <canvas id="canvas" width="500" height="400"></canvas>
    </div>
  </body>

CSS:

canvas {
   display: inline;
}

Javascript:

document.addEventListener("DOMContentLoaded", function() {
    drawBorder();
});

var canvas;
var context;
var size;

drawRectangle();
drawHalfCircle();

function drawBorder() {
    canvas = document.getElementById("canvas");
    context = canvas.getContext('2d');
    size = {
        x: canvas.width,
        y: canvas.height
    };
    //have to set colors etc befor it is drawn
    context.strokeStyle = 'black';
    //takes 4 parameters
    context.strokeRect(0, 0, size.x, size.y);
}

function drawRectangle() {
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");
    ctx.rect(246, 290, 8, 80);
    ctx.stroke();
}

function drawHalfCircle(){
    var c= document.getElementById("canvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(250,579,308,1.2*Math.PI, 1.8*Math.PI);
    ctx.stroke();
}
Crystal
  • 1,425
  • 1
  • 22
  • 34
  • Perhaps have a look at http://stackoverflow.com/questions/4422293/rotate-an-image-around-its-center-in-canvas :) or am i missing apart of the question – Spaceman Oct 01 '15 at 06:11
  • Also http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript for keypressing :) – Spaceman Oct 01 '15 at 06:13
  • @Spaceman Thanks for the references, but I already read over both of those posts and still not able to figure it out – Crystal Oct 01 '15 at 06:25
  • Possible duplicate of [HTML5 canvas - rotate object without moving coordinates](http://stackoverflow.com/questions/17125632/html5-canvas-rotate-object-without-moving-coordinates) – Kaiido Oct 01 '15 at 06:35
  • @Kaiido its a possible duplicate of many things but I never know how to deal with dups – Spaceman Oct 01 '15 at 06:46

1 Answers1

2

I have mocked something up is this along the correct lines of what you are wanting.

document.addEventListener("DOMContentLoaded", function() {
    drawBorder();
});

var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var size;
var angle = 0;

setInterval(function () {
    context.save(); 
    context.clearRect(0, 0, canvas.width, canvas.height); 

    drawBorder();
    drawHalfCircle();
    drawRectangle();

    context.restore(); 
 }, 100);

function drawBorder() {
    size = {
        x: canvas.width,
        y: canvas.height
    };

    //have to set colors etc befor it is drawn
    context.strokeStyle = 'black';
    //takes 4 parameters
    context.strokeRect(0, 0, size.x, size.y);
}

function drawRectangle() {
    context.rotate(Math.PI / 180 * (angle));
    context.rect(246, 290, 8, 80);
    context.stroke();
}

function drawHalfCircle(){
    context.beginPath();
    context.arc(250,579,308,1.2*Math.PI, 1.8*Math.PI);
    context.stroke();
}

document.onkeydown = function(e) {
    var event = window.event ? window.event : e;

    if (e.keyCode == '37') {
       angle += 5;
    }
    else if (e.keyCode == '39') {
       angle -= 5;
    }
}

Basically set an interval and redraw (ie frames like in a movie) and rotate via a variable.

See a demo here https://jsbin.com/qititacazu/edit?js,output

If you want to translate it so it will rotate around a different point do something like this.

context.translate(246, 290); 
context.rotate(Math.PI / 180 * (angle));
context.rect(-4, 0, 4, 80);
Spaceman
  • 1,319
  • 13
  • 42