# How can I draw buttons on Chart.js canvas?

**URL:** <https://discourse.processing.org/t/how-can-i-draw-buttons-on-chart-js-canvas/27180>\
**Category:** p5.js\
**Created:** [January 18, 2021, 10:21pm UTC](https://discourse.processing.org/t/how-can-i-draw-buttons-on-chart-js-canvas/27180 "2021-01-18T22:21:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [January 18, 2021, 10:21pm UTC](https://discourse.processing.org/t/how-can-i-draw-buttons-on-chart-js-canvas/27180/1 "2021-01-18T22:21:04Z")

</div>

Hi,

I’m trying to use Chart.js, and my sketch.js has the simplest example from [here](https://www.chartjs.org/docs/latest/). I want to put buttons on the chart e.g. previous and next. What I have is a second canvas below the chart with a single rect. How can I draw rect/line/etc on the same canvas as the chart?

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/cee82210ea087e5e1c621e007b600fd6db18e0c8.png)

Index.html:

```auto
<head>
  <title>Graphs?</title>
  <script language="javascript" type="text/javascript" src="p5.min.js"></script>
  <script src="socket.io.js"></script>
  <script src="node_modules/chart.js/dist/Chart.js"></script>
</head>
<body>

<button onclick="alert()">Click me!</button> 

<canvas id="myChart"></canvas>
<script src="sketch.js"></script>

</body>

```

Sketch.js:

```auto
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'line', // was 'bar'
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});
function setup()
{
  createCanvas(550,100);
  frameRate = 5;
}
function draw()
{
  background(200, 255, 200);
  fill(255,0,0);
  rect(20,20,20,20);
}

```