RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/canvas/methods/toDataURL below:

toDataURL · WebPlatform Docs

toDataURL

Method of dom/HTMLCanvasElement dom/HTMLCanvasElement

Syntax

var object = object.toDataURL();

Parameters type

Data-type: any

The standard MIME type for the image format to return. If you do not specify this parameter, the default value is a PNG format image.

jpegquality

Data-type: any

The quality level of a JPEG image in the range of 0.0 to 1.0.

Return Value

Returns an object of type DOM NodeDOM Node

String

The image data.

Examples

The following code example draws some graphics on a canvas and then uses toDataURL to make an image that is assigned to an img object.

<!DOCTYPE html><html>
<head>
  <script type="text/javascript">
function draw()
{

  var canvas = document.getElementById("MyCanvas");
  if (canvas.getContext)
    {
    var ctx = canvas.getContext("2d");
    ctx.fillStyle="white";
    ctx.beginPath();
    ctx.rect (5,5,300,250);
    ctx.fill();
    ctx.stroke();
    ctx.arc(150,150,100,0,Math.PI, false);
    ctx.stroke();
    }
}
function putImage()
{
  var canvas1 = document.getElementById("MyCanvas");
  if (canvas1.getContext) {
     var ctx = canvas1.getContext("2d");                
     var myImage = canvas1.toDataURL("image/png");      
  }
  var imageElement = document.getElementById("MyPix");  
  imageElement.src = myImage;                           

}
  </script>
</head>
<body onload="draw()" bgcolor="lightgray" >
      <div>
        <button onclick="putImage()">Copy graphic using toDataURL</button>
      </div>
      <div>
        <canvas id="MyCanvas" width="400" height="400" > </canvas>
      <img id="MyPix">
      </div>
  </body>
</html>

Notes Remarks

Typical values for the type parameter are image/png or image/jpg.

Syntax Standards information

HTML5 A vocabulary and associated APIs for HTML and XHTML, Section 4.8.10