How can I draw buttons on Chart.js canvas?

p5.js
1

Hi,

I’m trying to use Chart.js, and my sketch.js has the simplest example from here. 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
image720×441 13.7 KB

Index.html:

<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:

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);
}