diff --git a/js/fox.js b/js/fox.js index efde8c2..379fbf8 100644 --- a/js/fox.js +++ b/js/fox.js @@ -15,7 +15,7 @@ var Fox = function (IMG_WIDTH, IMG_HEIGHT, seed) { // TODO: head headWidth and height var headWidth = 0.6 * IMG_WIDTH; var headHeight = 0.6 * IMG_HEIGHT; - var origin = {x: IMG_WIDTH / 2 - headWidth / 2, y: IMG_HEIGHT / 2 - headHeight / 2}; + var origin = {x: IMG_WIDTH / 2 - headWidth / 2, y: 0.5 * IMG_HEIGHT - headHeight / 2}; var kappa = chance.floating({min: 0.2, max: 0.45}) var hue = chance.integer({min: 5, max: 50}); diff --git a/js/render-fox.js b/js/render-fox.js index d92c378..c969c16 100644 --- a/js/render-fox.js +++ b/js/render-fox.js @@ -10,8 +10,19 @@ var renderFox = function (canvas, opts) { renderEyes(ctx, opts.eyes); renderNose(ctx, opts.nose); renderMouth(ctx, opts.mouth); + + shift_canvas(ctx, width, height, 0, 0.06 * height); }; +function shift_canvas(ctx, w, h, dx, dy) { + var topImage = ctx.getImageData(0, 0, w, h); + var bottomImage = ctx.getImageData(0, h - dy, w, h); + + ctx.clearRect(0, 0, w, h); + ctx.putImageData(bottomImage, 0, 0); + ctx.putImageData(topImage, dx, dy); +} + function renderHead(ctx, opts) { ctx.save(); ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);