How to update a cloned HTML canvas element using context and source canvas data?

Question

I wrote a script that allows users to draw simple lines on top of an html 5 canvas element. The ultimate goal is for this drawing to be engraved and repeated over the rest of the browser. I have a cloned canvas on the page, but I'm struggling with how to draw the same lines simultaneously on top of several canvases.

I will insert 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 will do this is to update the cloned canvas after drawing on the main canvas.

Based on your current code, I would first like to return a cloned canvas instead of the old canvas. So you have a link 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 are using your own posx and posy variables. I would get rid of them, since you always want to copy the entire canvas. (In this case). Change the line as follows

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

Then I wrote a little helper function to link the 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 original canvas onto the cloned canvas.

You initialize it as follows:

 var updateClone = drawFromSource(canvas, clone); 

Last but not least, you need to add the newly created callback to the draw function. Immediately after you draw 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 have moved part of your code.

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

Just for fun. The tiled version just changes the "numberofTiles"

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

Answer 2

Try this code

In this, I created a function to register mouse events according to the canvas. and call this function for all canvases.

 var size = 40; var md = false; var canvas1 = document.getElementById('canvas'); registerEvents(canvas1) function move(evt){ console.log(evt.target.id); var canvas = document.getElementById(evt.target.id); var mousePos = getMousePos(canvas, evt); var posx = mousePos.x; var posy = mousePos.y; draw(canvas, posx, posy); window.posx; return mousePos; }; function registerEvents(canvas){ canvas.addEventListener('mousedown', down); canvas.addEventListener('mouseup', toggledraw); canvas.width = 600; canvas.height = 600; canvas.addEventListener('mousemove', move); } 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'); var id = "newCanvas"; newCanvas.className = "newNew"; newCanvas.id = id; newCanvas.width = canvas.width; newCanvas.height = canvas.height; newCanvas.style.border = "1px solid black"; document.body.appendChild(newCanvas); context.drawImage(canvas, posx, posy); registerEvents(document.getElementById(id)) return canvas; } 

The violin works here

Answer 3

In fact, you were close, I made several changes and achieved the desired result, here is the result .

 function cloneCanvas(canvas, posx, posy, size,) { var newCanvas = document.createElement('canvas'); var context = newCanvas.getContext('2d'); ... return context; // this should return the context! } 

and

 var clonedCanvas = cloneCanvas(canvas, window.posx, window.posy, size); // after you call the function get the 2d context to variable. 

Last Modified:

 function draw(canvas, posx, posy){ var context = canvas.getContext('2d'); if(md){ clonedCanvas.fillRect(posx, posy, size, size); // fillRect to variable that you defined at above, context.fillRect(posx, posy, size, size) } }; 

Jsfiddle exit;

Hope helps