acampbe222 acampbe222 - 7 months ago 32
Javascript Question

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);

});

Answer

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);
}