Get a html div element cloned on canvas with clone node. Is there a way to get it done.
Is there any way to get a html element (a div and a paragraph inside the div with height and width of 100px and background color which makes it look like a square) cloned on canvas element. Is it possible/allowed.
Thanks
Latha
2
Answers
The
<canvas>
-element is a primitive drawing facility that allows to create images. It’s visible content isn’t based on a DOM and therefor cannot take another<div>
-element (or whatsoever) as "content". However, it may be possible to recreate the appearance of the<div>
-element via primitive shapes on the<canvas>
.Below is a (halfway) working example. The line-breaks are a bit off, but it should be enough to lead you in the right direction.
Here is an option to do that. Keep in mind that if the div has a more complicated style it will need to be added also to the
data
style. It is fairly short and understandable to work with and keeps the exact look of thediv
element