CODEWITHSUNDEEP
javascripthtmlcanvas
mitwilsch
mitwilsch

Reputation: 133

Trouble with HTML Canvas Drawing

I'm trying to do this pixel drawing in HTML5 canvas, and can't figure out what's causing this behavior.

I have it set up so that the pixel "block" is 32*32 (I only have the character now, but the background tiles and other characters are the exact same size), so the window should be a grid divisible by 32.

I have a JS function to offset the X and Y of the character, but I seem to be keeping the offset, even though (I think) it shouldn't be changing it globally, only locally.

Thus, I can't do a simple grid of 4x4. Calling them in this order: 0,0; 0,1; 1,0; 1,1 should show a grid like this:

xx
xx

Instead it does this:

x 
xx 
  x

Here's a JSFiddle page: http://jsfiddle.net/pzwu38cq/

The calls that draw the pixels are in the JS panel, at the very bottom

I'm probably just missing something really simple, but I appreciate help in this.

Upvotes: 0

Views: 76

Answers (2)

treeno
treeno

Reputation: 2600

The problem is, that you are always changing the same Array by 

pixels[i][0] += offsetX * 32;
pixels[i][1] += offsetY * 32;

Try to make a deep-copy in drawPixels() like so:

http://jsfiddle.net/pzwu38cq/11/

I also changed 

drawPixels(warrior, 0,0);
drawPixels(warrior, 0,1);
drawPixels(warrior, 1,0);
drawPixels(warrior, 1,1);

slightly because the indeces where redundant, looks like a C&P-thing :-)

Upvotes: 2

Scott Doxey
Scott Doxey

Reputation: 391

This block of code was updating the original array (warrior):

pixels[i][0] += offsetX * 32;
pixels[i][1] += offsetY * 32;

Switching it to using a temporary array will achieve your desired results.

drawPixel([
    pixels[i][0] + offsetX * 32,
    pixels[i][1] + offsetY * 32,
    pixels[i][2],
    pixels[i][3],
    pixels[i][4],
    pixels[i][5]
]);

Demo: http://jsfiddle.net/pzwu38cq/12/

Upvotes: 2

Related Questions