# drawingContext.drawImage causes offset of element on mobile

**URL:** <https://discourse.processing.org/t/drawingcontext-drawimage-causes-offset-of-element-on-mobile/39455>\
**Category:** Coding Questions\
**Created:** [October 27, 2022, 8:24am UTC](https://discourse.processing.org/t/drawingcontext-drawimage-causes-offset-of-element-on-mobile/39455 "2022-10-27T08:24:49Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![PatrckHutchinson](https://avatars.discourse-cdn.com/v4/letter/p/ecd19e/32.png) [@PatrckHutchinson](https://discourse.processing.org/u/PatrckHutchinson)\
**Post date:** [October 27, 2022, 8:24am UTC](https://discourse.processing.org/t/drawingcontext-drawimage-causes-offset-of-element-on-mobile/39455/1 "2022-10-27T08:24:49Z")

</div>

Dear all,

I’m working on some of Tim Rodenbrökers code involving a copy() function ([Processing-Tutorial: Kinetic Typography 1 • tim rodenbröker creative coding](https://timrodenbroeker.de/processing-tutorial-kinetic-typography-1/)), expanding it and making it ready for web.  
This involves replacing the copy() function with drawingContext.drawImage() for performance increase (found here: [P5.js copy function slow performance since version 0.10.0](https://discourse.processing.org/t/p5-js-copy-function-slow-performance-since-version-0-10-0/30007)).

Doing this works great for desktop; on mobile, however, the pgraphics element (centered on the canvas, usually), moves position. Using the regular copy() function centeres it correctly. The positioning varies according to mobile screen size, I can’t seem to figure out the exact behavior to fix. It’s not the font size, I’ve tried adapting the position to screen.size and document.documentElement.clientWidth, no luck.

```auto
let font;
let pg;
//let pgwidth = innerWidth;
//let pgheight = innerHeight;

function setup() {
    font = loadFont("./assets/FGrotesk-Regular.otf");
    createCanvas(innerWidth, innerHeight);
    pg = createGraphics(innerWidth, innerHeight, P2D);
    //framerate could somehow be adapted according to computer performance, somehow?
    frameRate(60);
    pixelDensity(1);
}

function draw() {
    background(0);

    // pg.beginDraw();
    pg.background(0);
    pg.fill(255);
    pg.textFont(font);
    pg.textSize(380);
    pg.push();
    pg.translate(innerWidth / 2, innerHeight / 2);
    pg.textAlign(CENTER, CENTER);
    pg.text("Enrico", 0, -50);
    pg.text("Gisana", 0, 50);
    pg.pop();
    // pg.endDraw();

    //tiles could somehow be adapted according to computer performance, somehow?
    let tilesX = 400;
    let tilesY = 20;

    let tileW = int(width / tilesX);
    let tileH = int(height / tilesY);

    for (y = 0; y < tilesY; y++) {
        for (x = 0; x < tilesX; x++) {

            // WARP

            let wave_x = int(sin(frameCount * 0.02 + (x * y) * 0.07) * 100) - (mouseY / 2);
            let wave_y = int(sin(frameCount * 0.02 + (x * y) * 0.07) * 100) - (mouseY / 2);

            //tileW = mouseY / 2;

            if (mouseX - (width / 2) >= 0) {
               wave_x = int(sin(frameCount * 0.02 + ((x / 0.8) * (y/0.2)) * 0.04) * (-1 * (mouseX - (width / 2)) / 30));
            } else {
                wave_x = int(sin(frameCount * 0.02 + ((x / 0.8) * (y/0.2)) * 0.04) * (-1 * (mouseX - (width / 2)) / 30));
            }

            if (mouseY - (height / 2) >= 0) {
                wave_y = int(sin(frameCount * 0.02 + ((x / 0.2) * (y/0.8)) * 0.04) * ((mouseY - (height / 2)) / 30));
            } else {
                wave_y = int(sin(frameCount * 0.02 + ((x / 0.2) * (y/0.8)) * 0.04) * ((mouseY - (height / 2)) / 30));
            }

            // SOURCE
            let sx = x * tileW + wave_x;
            // + wave should be added here 
            let sy = y * tileH - wave_y;
            let sw = tileW;
            let sh = tileH;

            // DESTINATION
            let dx = x * tileW;
            let dy = y * tileH;
            let dw = tileW;
            let dh = tileH;

            drawingContext.drawImage(pg.elt, sx, sy, sw, sh, dx, dy, dw, dh);
        }
    }
}

```

 ![mobile](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/1/9/19e9d4dfaaf5877f1cbbdc747744ceb287e7c3e4.png)