HTML5のcanvas要素を使って、四角形と円を書いてみました。ここを参考にしました。
※追記 「download」をクリックすると、画像がダウンロードされるようにしてみました(Chrome推奨)。a要素のdownload属性を使っています(参照)。細部は「Yahoo! 知恵袋」(参照)で教えて頂きました。ありがとうございます。なるほど、「Data URI scheme」ですか。プログラミングは奥が深いですなあ。
HTML
<canvas id="myCanvas" width="200" height="200"></canvas><br> <a download="sample" id="dwl">download</a>
/* canvas要素のノードオブジェクト */ var canvas = document.getElementById('myCanvas'); draw(); document.getElementById("dwl").href = canvas.toDataURL(); function draw() { /* canvas要素の存在チェックとCanvas未対応ブラウザの対処 */ if ( ! canvas || ! canvas.getContext ) { return false; } /* 2Dコンテキスト */ var ctx = canvas.getContext('2d'); /* 外枠 */ ctx.strokeRect(0,0,200,200); /* 四角を描く */ ctx.fillStyle = "aquamarine"; ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(100, 20); ctx.lineTo(120, 120); ctx.lineTo(20, 100); ctx.fill(); ctx.closePath(); ctx.stroke(); /* 円を書く */ ctx.beginPath(); ctx.fillStyle = "orchid"; ctx.arc(150,150,30,0,Math.PI*2); ctx.fill(); ctx.closePath(); ctx.stroke(); }