Question: I am using Chart.js. I am trying to convert the chart to an image by getting a base 64 string. The tutorial (<http://www.chartjs.org/docs/>) devotes an entire 1 line on the topic:

> 
> The canvas element also allows for saving the contents as a base 64
>  string, allowing saving the chart as an image.
> 
> 
> 

A `canvas` element has the method of `toDataURL`, which returns a base64 string of the image. However, when I do that, the image it renders is just a transparent rectangle with the dimensions of the chart, and it does not include the chart contents. 

Here is a fiddle: <http://jsfiddle.net/KSgV7/>

The "images" in the fiddle are styled with a black border, so you can see where they are supposed to be, since they seem to just be a big transparent block.

Has anyone successfully converted a Chart.js chart to an image?

Answer: 
Chart.JS API has changed since this was posted and older examples did not seem to be working for me.
here is an updated fiddle that works on the newer versions 

HTML:

```
<body>
    <canvas id="canvas" height="450" width="600"></canvas>
    <img id="url" />
</body>

```

JS:

```
function done(){
  alert("haha");
  var url=myLine.toBase64Image();
  document.getElementById("url").src=url;
}

var options = {
  bezierCurve : false,
  animation: {
    onComplete: done
  }
};

var myLine = new 
   Chart(document.getElementById("canvas").getContext("2d"),
     {
        data:lineChartData,
        type:"line",
        options:options
      }
    );

```

<http://jsfiddle.net/KSgV7/585/>
You can access `afterRender` hook by using `plugins`.

And [here](http://www.chartjs.org/docs/latest/developers/plugins.html#plugin-core-api) are all the plugin api available.

In html file:

```html
<html>
  <canvas id="myChart"></canvas>
  <div id="imgWrap"></div>
</html>

```

In js file:

```js
var chart = new Chart(ctx, {
  ...,
  plugins: [{
    afterRender: function () {
      // Do anything you want
      renderIntoImage()
    },
  }],
  ...,
});

const renderIntoImage = () => {
  const canvas = document.getElementById('myChart')
  const imgWrap = document.getElementById('imgWrap')
  var img = new Image();
  img.src = canvas.toDataURL()
  imgWrap.appendChild(img)
  canvas.style.display = 'none'
}

```