1 <h1>Canvas introspection</h1>2 3 <canvas id="my_canvas" width="500" height="500"></canvas>4 5 <img id="my_bitmap" src="http://www.treeweb.es/Proyectos/Communis/imagenes/image1.png">6 7 <script type="text/javascript">8 9 // Create a canvas10 var canvas = window.my_canvas = document.getElementById('my_canvas');11 var ctx = canvas.getContext('2d');12 ctx.fillStyle = "rgb(200,0,0)";13 ctx.fillRect (10, 10, 55, 50);14 15 ctx.fillStyle = "rgba(0, 0, 200, 0.5)";16 ctx.fillRect (30, 30, 55, 50);17 18 19 // Draw image20 var my_bitmap = document.getElementById('my_bitmap');21 ctx.drawImage(my_bitmap, 0, 0);22 23 24 25 26 // Download image from canvas27 var a = document.createElement('a');28 a.href = canvas.toDataURL();29 a.download = 'imageName';30 a.target = '_blank';31 a.innerHTML = 'Download!';32 //window.location = (canvas.toDataURL());33 document.body.appendChild(a);34 35 a.click();36 37 38 39 </script>Enlace
El enlace para compartir es: