How do I update a cloned HTML canvas element with the context and data of the original canvas?

Question

I have written a script that allows users to draw simple lines on top of an html 5 canvas element. The ultimate goal is to have this drawing being tiled and repeated across the rest of the browser. I have gotten a cloned canvas onto the page but am struggling on how to draw the same lines simultaneously on top of multiple canvases.

I will paste my code below

var size = 40;
var md = false;
var canvas = document.getElementById('canvas');
canvas.addEventListener('mousedown', down);
canvas.addEventListener('mouseup', toggledraw);

canvas.width  = 600;
canvas.height = 600;

canvas.addEventListener('mousemove', move);

function move(evt){

  var mousePos = getMousePos(canvas, evt);
  var posx = mousePos.x;
  var posy = mousePos.y;
  draw(canvas, posx, posy);

  window.posx;


  return mousePos;



};


function down(){
  md = true;
}

function toggledraw(){
  md = false;
}

function getMousePos(canvas, evt){
  var rect = canvas.getBoundingClientRect();
  return{
    x:evt.clientX - rect.left,
    y:evt.clientY - rect.top
  };
};

function draw(canvas, posx, posy){
  var context = canvas.getContext('2d');


  if(md){
    context.fillRect(posx, posy, size, size)
  }

};

cloneCanvas(canvas, window.posx, window.posy, size);

function cloneCanvas(canvas, posx, posy, size,) {
  console.log(posx);


  var newCanvas = document.createElement('canvas');
  var context = newCanvas.getContext('2d');
  newCanvas.className = "newNew";


  newCanvas.width = canvas.width;
  newCanvas.height = canvas.height;
  document.body.appendChild(newCanvas);



  //context.fillRect(posx, posy, size, size)
  context.drawImage(canvas, posx, posy);



  return canvas;
}

Answer 1

The way I would go about it is to update the cloned canvas after drawing on the main canvas.

Based on your current code I would first want to return the cloned canvas instead of the old canvas. This way you have a reference to it.

 function cloneCanvas(canvas, posx, posy, size,) {
   ...
 //  --> return canvas;
 return newCanvas // Becomes this.
}

Next, looking at the line:

cloneCanvas(canvas, window.posx, window.posy, size);

I see that you're using your own "posx" and "posy" variables. I would get rid of those since you will always want to copy the whole canvas. (In this case). Change the line like this

var clone = cloneCanvas(canvas, 0, 0, size);

Next, I wrote a little helper function to link two canvases.

function drawFromSource(source, destination) {
  return function() {
    var context = destination.getContext('2d');
    context.clearRect(0, 0, destination.width, destination.height);
    context.drawImage(source, 0, 0);
  }
}

This function returns a callback that when called draws the the orginal canvas onto a cloned canvas.

You initialize it like this:

var updateClone = drawFromSource(canvas, clone);

And last but not least you have to add the newly created callback into the draw function. Right after you draw onto your main canvas.

function draw(canvas, posx, posy) {
  var context = canvas.getContext('2d');
  if (md) {
    context.fillRect(posx, posy, size, size)
    updateClone();
  }

};

Voila! Here is a link to the working code, I shifted some of your code around.

https://jsfiddle.net/30efdvz3/5/

Just for fun. Tiled version just change "numberofTiles"

https://jsfiddle.net/30efdvz3/3/