CODEWITHSUNDEEP
javascripthtml5-canvasdrawing
acampbe222
acampbe222

Reputation: 83

How to make drawing move using canvas and javascript?

I have a stick figure drawing that i've created that i'd like to animate every time the right arrow key is pressed. I understand that I cannot literally move the object, but I can erase and continually redraw the image. However my implementation is probably way off. Any help would be well appreciated. 

$(document).ready(function(e){

var canvas = document.getElementById("drawCanvas"),
context = canvas.getContext('2d'),
width = canvas.width,
height = canvas.height,
head = new  Array(200, 200, 10,0,  2*Math.PI) ,
body = new Array(195, 210, 178, 250) ,
leftArm = new Array(192,215,200,230,210,230),
rightArm = new Array(192,215,178 ,222,178,230),
leftLeg = new Array(178, 250,190,260,185,275,192, 275 ),
rightLeg= new Array(178, 250, 168, 260, 155, 262,153, 268  )  ;


// board for game
function board(){
context.fillStyle="#FFF";
context.fillStyle="#FFF";
context.fill();
context.strokeStyle="#000";
context.strokeRect(0,0,width,height);
}


//costume #1
function costume1(){
context.beginPath();

//head
context.arc(head[0], head[1], head[2],head[3],  head[4]);

//body
context.moveTo(body[0],body[1]);
context.lineTo(body[2],body[3]);

//right arm
context.moveTo(rightArm[0],rightArm[1]);
context.lineTo(rightArm[2] ,rightArm[3]);
context.lineTo(rightArm[4], rightArm[5]);

//left arm
context.moveTo(leftArm[0], leftArm[1]);
context.lineTo(leftArm[2], leftArm[3]);
context.lineTo(leftArm[4], leftArm[5]);

//left leg
context.moveTo(leftLeg[0], leftLeg[1]);
context.lineTo(leftLeg[2],leftLeg[3]);
context.lineTo(leftLeg[4] , leftLeg[5]);
context.lineTo(leftLeg[6], leftLeg[7]);


//right leg
context.moveTo(rightLeg[0], rightLeg[1]);
context.lineTo(rightLeg[2], rightLeg[3]);
context.lineTo(rightLeg[4], rightLeg[5]);
context.lineTo(rightLeg[6], rightLeg[7]);
context.stroke();
}


//costume #2
function costume2(){
context.arc(head[0], head[1], head[2],head[3],  head[4]);

//body
context.moveTo(body[0],body[1]);
context.lineTo(body[2],body[3]);

//right arm
context.moveTo(rightArm[0],rightArm[1]);
context.lineTo(rightArm[2] + 5 ,rightArm[3]);
context.lineTo(rightArm[4] + 5 , rightArm[5]);

//left arm
context.moveTo(leftArm[0]     , leftArm[1] );
context.lineTo(leftArm[2] - 5 , leftArm[3] );
context.lineTo(leftArm[4] - 10, leftArm[5] );

//left leg
context.moveTo(leftLeg[0] , leftLeg[1]);
context.lineTo(leftLeg[2] - 10 ,leftLeg[3]);
context.lineTo(leftLeg[4] - 20, leftLeg[5]);
context.lineTo(leftLeg[6] - 20, leftLeg[7]);


//right leg
context.moveTo(rightLeg[0],       rightLeg[1]);
context.lineTo(rightLeg[2] + 15 , rightLeg[3] );
context.lineTo(rightLeg[4] + 30 , rightLeg[5]);
context.lineTo(rightLeg[6] +10, rightLeg[7]);
context.stroke();
}

function clear(){
     context.clearRect(0,0, canvas.width, canvas.height);
}

var handle = true;
board();
///move Character
function check(e) {
    var code = e.keyCode;
    //Up arrow pressed
     if (code == 39   &&  handle == true) {
    clear();
    board();
    costume2();
    handle = false;
      }
   else  if(code == 39 &&  handle == false) {
    clear();
    board();
    costume1();
    handle = true;
  }


}
window.addEventListener('keydown',check,false);

});

Upvotes: 0

Views: 1460

Answers (2)

markE
markE

Reputation: 105015

Use canvas transformations to move your stickman around the canvas.

In particular, context.translate(50,75) will move your stickman 50px rightward and 75px downward and importantly(!), you don't have to change any of your stickman coordinates -- canvas handles that completely for you.

Transformations will also help you articulate the arms, legs, etc of your stickman. You can use a combination of translate( rotationPointX, rotationPointY) and rotate(angle) to rotate an extremity by angle around its joint located at [rotationPointX, rotationPointY].

Example moving the stickman:

function drawStickman(changeInX,changeInY){
    context.clearRect(0,0,canvas.width,canvas.height);
    context.translate(changeInX,changeInY);
    // draw your stickman -- no change in coordinates are needed
    context.translate(-changeInX,-changeInY);
}

Upvotes: 1

Brian Greig
Brian Greig

Reputation: 31

I would recommend you use the window.requestAnimationFrame() to redraw the screen. This will incrementally redraw the screen for every frame of animation. For example:

$(function(){
var context = document.getElementById('myCanvas').getContext('2d');
//initialize
window.requestAnimationFrame(draw);
function draw(){
    context.clearRect(0,0,800,600); // clear canvas
    // draw the current frame 
    // animate the next frame 
    window.requestAnimationFrame(draw);
}});

Upvotes: 2

Related Questions