Grazie m4rko80 per le soluzioni proposte che io applicate nel codice qui sotto, senza però ottenere il file immagine di estensione .jpg che vorrei ottenere.
Infatti con l'istruzione var mia_immagine = canvas.toDataURL("image/jpg"); il canvas diventa il DataURL mia_immagine
e con l'istruzione document.write('<img src="'+mia_immagine+'"/>'); viene visualizzata mia_immagine.
Ma il file immagine di estensione .jpg è stato creato? E se sì, dove è memorizzato? Grazie per l'aiuto
lanvoel
codice:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="400"
style="border:1px solid blue;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.strokeStyle="red"
ctx.beginPath();
ctx.moveTo(10,80);
ctx.lineTo(190,80);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="red";
ctx.fillText("red",10,90);
ctx.strokeStyle="blue";
ctx.beginPath();
ctx.moveTo(10,160);
ctx.lineTo(190,160);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="blue";
ctx.fillText("blue",10,170);
ctx.strokeStyle="green"
ctx.beginPath();
ctx.moveTo(10,240);
ctx.lineTo(190,240);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="green";
ctx.fillText("green",10,250);
ctx.strokeStyle="magenta";
ctx.beginPath();
ctx.moveTo(10,320);
ctx.lineTo(190,320);
ctx.closePath();
ctx.stroke();
ctx.fillStyle="magenta";
ctx.fillText("magenta",10,330);
ctx.fillStyle="red";
ctx.fillRect(210,80,180,40);
ctx.fillText("red",210,130);
ctx.fillStyle="blue";
ctx.fillRect(210,160,180,40);
ctx.fillText("blue",210,210);
ctx.fillStyle="green";
ctx.fillRect(210,240,180,40);
ctx.fillText("green",210,290);
ctx.fillStyle="magenta";
ctx.fillRect(210,320,180,40);
ctx.fillText("magenta",210,370);
var mia_immagine = canvas.toDataURL("image/jpg");
document.write('<img src="'+mia_immagine+'"/>');
</script>
</body>
</html>