0

I didn't find an answer to this question anywhere. Maybe you can help me. I draw chart in canvas and div (canvas:chart.js / div:morris.js). I just set elements drag&drop with HMTL5, it's working fine, but when I move canvas it wipe everything on it. On div chart stay but with canvas not. Is there a solution other than redraw each time I move canvas ?

Thank you for your help

edit : sample of code 

<article class="widget" draggable="true">
    <header>
    </header>
    <canvas class="canvas-container"></canvas>
</article>

<article class="widget" draggable="true">
    <header>
    </header>
    <div class="canvas-container"></div>
</article>
braX
  • 11,506
  • 5
  • 20
  • 33
Thibaud.P
  • 29
  • 5
  • Your question is not yet clear. Please show your code. However, the design pattern of html5 canvas is to clear and then redraw all items back on the canvas so your answer *might be* yes--you must redraw each time you move the canvas. :-) – markE Jun 06 '14 at 14:50
  • I found problem cause, I copy innerHTML of elements. But canvas hasn't HTML code. So I need to find a way to copy a canvas in HTML if it's possible. – Thibaud.P Jun 06 '14 at 15:08

1 Answers1

1

You've chosen to provide no code, so generally speaking you can use your charting canvas as the source for either an img element or another canvas element.

For example, given some html elements:

<canvas id="sourceCanvas" width=300 height=300></canvas>

<img id="theCopy">

<canvas id="destinationCanvas" width=300 height=300></canvas>

Code to copy an html canvas content to an image element:

// This code will set the source of that img element to be the canvas image

var canvas=document.getElementById("sourceCanvas");
var ctx=canvas.getContext("2d");

document.getElementById('theCopy').src=canvas.toDataURL();

Code to copy an html canvas content to another html canvas element:

var source=document.getElementById("sourceCanvas");

var destination=document.getElementById("destinationCanvas");
var destinationContext=destination.getContext("2d");

destinationContext.drawImage(source,0,0);

A Demo: http://jsfiddle.net/m1erickson/6yvXb/

enter image description here

markE
  • 102,905
  • 11
  • 164
  • 176
  • Thank you, I think it's what I was looking for but because I switch object it may be more complicated to copy than to refresh when it's a canvas. Thank you again, I will use it for other applications. – Thibaud.P Jun 10 '14 at 07:47