Examples of HTML5 use of canvas drawings

For canvas drawings, you can use the Todataurl () method to save the drawn image and then use it two times for the object element.

<p>canvas Drawing </p>
<canvas id= "MyCanvas" width= "height=" ></canvas>
<p> Restore Drawing </p>
<object type= "Image/png" id= "MyImage" ></object>

JS Processing

<script type= "Text/javascript" >
var canvas = document.getElementById ("MyCanvas");
if (canvas &&canvas.getcontext)
{
var cxt = Canvas.getcontext (' 2d ');
Cxt.fillstyle= "#FF0000";
Cxt.fillrect (0,0,150,75);
}
var url=canvas.todataurl (); Returns the base64 encoded data for a picture, and can also pass a MIME type format, such as Image/png
var img = document.getElementById ("MyImage");
Img.data=url; Restores a picture, specifies a mime, or can use the SRC attribute

Results: