The output of this recipe may not be attractive, but the recipe is definitely useful. Whatever you draw on the canvas can be saved as an image:
The recipe code is as follows:
<html> <head> <title>Image</title> <style> img { border: 1px solid black; } </style> <script src="CanvasToImageAndBackToCanvas.js"></script> </head> <body onload="init();"> <center> <canvas id="MyCanvasArea1" width="100" height="100" style="border:2px solid blue;" > your browser does not support canvas </canvas> <h1>Drawing in canvas 1.</h1> <br><br> <imgsrc="" id="myimg" alt="here goes the image"><br><br> <h1>Image saved from canvas 1 and assigned to image element</h1> <canvas id="MyCanvasArea2" width="100" height="100" style="border:2px solid green;" > your browser does not support canvas </canvas> <h1...