CODEWITHSUNDEEP
htmlcanvasoledragdrop
Thibaud.P
Thibaud.P

Reputation: 29

canvas wipe on drag and drop HTML5

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>

Upvotes: 0

Views: 375

Answers (1)

markE
markE

Reputation: 105015

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

Upvotes: 1

Related Questions