html – Creating image using html5

html – Creating image using html5

In order to save the canvas to an image file, you can use Nihilogics code.

Use the canvas text functions.

For example:

    <title>Canvas tutorial</title>
    <script type=text/javascript>
      function draw(){
        var canvas = document.getElementById(tutorial);
        if (canvas.getContext){
          var ctx = canvas.getContext(2d);
          ctx.fillText(Sample String, 10, 50);
    <style type=text/css>
      canvas { border: 1px solid black; }
  <body onload=draw();>
    <canvas id=tutorial width=150 height=150></canvas>

Create an image DOM element, and set the src to the canvas.toDataURL method.

var c = document.getElementById(c);
var ctx = c.getContext(2d);
ctx.fillStyle = red;
ctx.fillRect(10, 10, 50, 50);

function copy() {
       var image = document.getElementById(Img);
           image.src = c.toDataURL(image/png);

<canvas id=c width=300 height=150 style=border:1px solid #d3d3d3;>
Your browser does not support the HTML5 canvas tag.</canvas>
<img id=Img width=300 height=150 style=border:1px solid #d3d3d3;/>
<button onclick=copy()>Copy</button>

html – Creating image using html5

Leave a Reply

Your email address will not be published.