actionscript 3 - How to scroll pixels inside html5 canvas? -

actionscript 3 - How to scroll pixels inside html5 canvas? -

i want scroll (displacement each pixels) within html5 canvas, similar actionscript-3 bitmapdata.scroll(x, y);

just redraw canvas itself. browser internally copying faster doing manually through js, though trick create work create sure background non-transparent (if alpha required need re-create content temporary canvas).

then either clear gap or redraw/fill it.

you can utilize as:

// bitmapdata.scroll(x, y); -> scroll(ctx, x, y);

the core function here functional illustration of 1 way of doing this:

function scroll(ctx, x, y) { var ax = math.abs(x), // these makes our calculations ay = math.abs(y); // easier below... ctx.fillstyle = '#fff'; // fill background left gap if (x < 0) { // moving left? ctx.drawimage(ctx.canvas, ax, 0, w - ax, h, 0, 0, w - ax, h); ctx.fillrect(w-ax, 0, ax, h); // or redraw } else if (x > 0) { // moving right? ctx.drawimage(ctx.canvas, 0, 0, w - ax, h, ax, 0, w - ax, h); ctx.fillrect(0, 0, ax, h); } if (y < 0) { // moving up? ctx.drawimage(ctx.canvas, 0, ay, w, h - ay, 0, 0, w, h - ay); ctx.fillrect(0, h - ay, 0, w, ay); // or redraw } else if (y > 0) { // moving down? ctx.drawimage(ctx.canvas, 0, 0, w, h - ay, 0, ay, w, h - ay); ctx.fillrect(0, 0, w, ay); } }

the drawimage() takes image source first argument (image, video or canvas). 4 next ones describes part want copy. gonna move pixels don't need include them in part subtract increment performance.

the lastly 4 describes destination region, our new placement. it's of import maintain same dimensions in source part or graphics stretched.

working demo follows:

class="snippet-code-js lang-js prettyprint-override">var canvas = document.getelementbyid('canvas'), ctx = canvas.getcontext('2d'), w = canvas.width, h = canvas.height, scrollx = -2, scrolly = 1; // create background solid start with: ctx.fillstyle = '#fff'; ctx.fillrect(0, 0, w, h); // scrolls x in either direction (adopt same approach y) function scroll(ctx, x, y) { var ax = math.abs(x), ay = math.abs(y); ctx.fillstyle = '#fff'; // fill background gap if (x < 0) { // moving left? ctx.drawimage(ctx.canvas, ax, 0, w - ax, h, 0, 0, w - ax, h); ctx.fillrect(w-ax, 0, ax, h); // or redraw } else if (x > 0) { // moving right? ctx.drawimage(ctx.canvas, 0, 0, w - ax, h, ax, 0, w - ax, h); ctx.fillrect(0, 0, ax, h); } if (y < 0) { // moving up? ctx.drawimage(ctx.canvas, 0, ay, w, h - ay, 0, 0, w, h - ay); ctx.fillrect(0, h - ay, 0, w, ay); // or redraw } else if (y > 0) { // moving down? ctx.drawimage(ctx.canvas, 0, 0, w, h - ay, 0, ay, w, h - ay); ctx.fillrect(0, 0, w, ay); } } // ------ demo loop ---------------------------------------------------------- (function loop() { // draw random points ctx.fillstyle = '#007'; for(var = 0; < 16; i++) ctx.fillrect(w-2, h * math.random(), 2, 2); // utilize scroll method scroll(ctx, scrollx, scrolly); requestanimationframe(loop); })(); class="snippet-code-html lang-html prettyprint-override"><canvas id=canvas width=500 height=180></canvas>

actionscript-3 html5-canvas