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

Introduction

[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.

window.open(document.getElementById('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:

 
Tweet
 

© Copyright 2014 Richard Heyes All rights reserved.