如何在Canvas上拖放图像/文本并将画布保存为HTML？

Question

How can I show Html/pdf on page(Using Canvas) and add images and text by dragging and dropping them and save Canvas as html ? I have tried jQuery UI for drag and drop images and text but it's not up to mark. Can I load html into canvas and perform the drag and drop on canvas?

Answer 1

No, you can't load actual html into canvas itself (largely for security reasons).

This canvas library does a fairly good job of "faking it":

http://html2canvas.hertzen.com/

But with a little learning, you may find that canvas itself has all the formatting/drawing capabilities you need.

• Drawing basic elements: lines, rectangles, arcs, images
• Drawing text including fonts and font sizes
• Drawing custom paths
• Drawing effects: opacity, shadowing, compositing (blending), clipping
• Strokes, fills (including gradients), patterns
• Transforms: move, rotate, scale, skew

And you can tie into window events (mouse, touch, requestAnimationFrame, etc) to get more:

• Drag/Drop
• Animations
• Transitions
• Spriting
• Capture & Alter video streams