Share RGraph:
Share RGraph on Twitter Share RGraph on Google Plus Share RGraph on Facebook Follow RGraph on LinkedIn

An example of the HTML5 canvas toDataURL() function

by Richard Heyes, RGraph author


[No canvas support]

One way you can transfer your canvas around is by using the toDataUrl() function. This function takes a snapshot of the appearance of the canvas and returns it as a base64 encoded data: URL. For example:

var canvas = document.getElementById('cvs');
var context = canvas.getContext('2d');
context.font = '26pt Arial';
context.fillText('Some example text!', 10, 40);

url = canvas.toDataURL();

document.getElementById("out").value = url;

The output

Here is an example of the output of the function. Here it's shown in a textarea - though you can just as easily use it in a link as the URL.'cvs').toDataURL(), 'new_window', 'width=310,height=30')

Or you could use it as the src of an image tag:

<img src="data:image/png;base64,iVBORw0KGgoAAAA ... ">

Share this page:


© Copyright 2014 Richard Heyes All rights reserved.