Converting canvas to image and back to canvas
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:
![](https://static.packt-cdn.com/products/9781785284892/graphics/B04673_04_07.jpg)
How to do it
The recipe code is as follows:
The HTML code:
<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...