ansaurus

Question

Canvas in HTML5: Removing Previous Rectangle

Answer 1

A:

To answer the first question here is a function to clear a canvas. A is a reference to canvas element though you could edit what parameters it takes. You would need to call this every time before you draw a new rectangle.

function clear(a){
    a.getContext('2d').clearRect(0,0,a.width,a.height);
}

I think in the second question you meant move at an angle. As far as I know that would be a little difficult because you would have record the key press and then set a timeout to see if another one was pressed within some amount of time. Then create a function to move both of those directions or just one if no other arrow keys were pressed. Right now your function would kind of work if both key were pressed, but the rectangle would jerk left and then up.

qw3n 2010-08-05 16:43:41

hmm, it doesnt seem to be working. I'm calling this function whenever the user presses a key, like before I translate the rectangle. Is that right?

Johnny 2010-08-05 17:43:42

I'm slightly confused on how your code is supposed to work. But the problem here is when you call clear you need to draw the clearRect from the top left corner. Because you are translating the origin point it is not drawing from there. You are going to need some method of drawing the clearRect at the original 0,0. One method that comes to mind is instead of translating the origin save var x and y to the starting position. Then when the user presses an arrow key manipulate the values like you were doing when translating the origin. Then draw the rectangle to the position using x and y.

qw3n 2010-08-05 18:31:15

Answer 2

A:

I made an example for you. Your HTML has to call my init() function. I used:

<body onLoad="init()">

Let me know if you have any problems with it

var canvas;
var draw;

var WIDTH;
var HEIGHT;

var x = 10;
var y = 10;

// in my html I have <body onLoad="init()">
function init() {
    canvas = document.getElementById('game');
    HEIGHT = canvas.height;
    WIDTH = canvas.width;
    draw = canvas.getContext('2d');

    // every 30 milliseconds we redraw EVERYTHING.
    setInterval(redraw, 30);

    // canvas.keydown = canvasMove;

    document.onkeydown = canvasMove; 
}

//wipes the canvas context
function clear(c) {
    c.clearRect(0, 0, WIDTH, HEIGHT);
}

//clears the canvas and draws the rectangle at the appropriate location
function redraw() {
    clear(draw);
    draw.fillStyle = 'rgba(0,0,0,0.5)';
    draw.fillRect(x, y, '100', '100');   
}

function canvasMove(e) {
  if(e.keyCode == '38') { y -= 1; }
  if(e.keyCode == '40') { y += 1; }
  if(e.keyCode == '37') { x -= 1; }
  if(e.keyCode == "39") { x += 1; }
}

Simon Sarris 2010-08-06 18:51:14

Ha, I got it to work eventually, but comparing your code to mine, mine comes across awful complicated. Thank you :)

Johnny 2010-08-08 20:29:34

ansaurus

tags:

views:

answers:

Canvas in HTML5: Removing Previous Rectangle

related questions