How can I make copies of the canvas? Original + copy next to it, with same contents.

kristianp89

I have the following code in setup():

originalCanvas = createCanvas(windowWidth/2, windowHeight);
originalCanvas.position(0, 0);
originalCanvas.background(0);

copiedCanvas = originalCanvas;
copiedCanvas.position(windowWidth/2, 0);

However, only the right half of the screen is black. The left part is white, which I find weird. If my approach didn't work, shouldn't at least the left part be black and the right part white?

When I put an ellipse with mouseX and mouseY in draw(), it only shows in the black/right canvas. The left canvas seems inactive.

I know about createGraphics, but then I would have to always draw things twice, right? For example "original.ellipse(...) and copy.ellipse(...)" - or am I missing something?

TfGuy44

Draw whatever you want on the left half.

Use get() to get an image of the left half.

Use image() to redraw it on the right.

kristianp89

Okay, so I got it working the way I want, but Chrome runs out of memory after a few seconds. I'm a newbie to programming, so I don't know how to determine what's causing it.

Also, why doesn't the tint affect the background? The mouse ellipses get coloured green, but the background is black.

var copiedCanvas;
function setup() {
    createCanvas(windowWidth, windowHeight);
    background(255, 0, 0);
}

function draw() {
    ellipse(mouseX, mouseY, 10, 10)
    copyCanvas()
}

function copyCanvas() {
    copiedCanvas = get();
    tint(0, 255, 0);
    image(copiedCanvas, windowWidth/2, 0)
}