写一个canvas曲线图表，包含区域图，曲线的数据点可以自定义样式，支持双X轴，X轴位置可自定义，可放大左右滚动，滚动条样式可以自定义并支持使用图片，加入动画渲染，数据更新时能刷新图表

这是一个相对较复杂的需求，需要一些前端开发经验。以下是一个简单的示例代码，供参考：

HTML部分：

<div id="chart-container">
  <canvas id="chart"></canvas>
  <div id="scrollbar"></div>
</div>

CSS部分：

#chart-container {
  position: relative;
  width: 800px;
  height: 400px;
}

#chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#scrollbar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
}

JS部分：

// 初始化参数
var chartData = [
  {x: 1, y: 10},
  {x: 2, y: 20},
  {x: 3, y: 15},
  {x: 4, y: 25},
  {x: 5, y: 18},
  {x: 6, y: 30},
  {x: 7, y: 22},
  {x: 8, y: 35},
  {x: 9, y: 28},
  {x: 10, y: 40},
];
var chartOptions = {
  xAxes: [{
    position: 'bottom', // X轴位置
    ticks: {
      min: 0, // X轴最小值
      max: 10 // X轴最大值
    }
  }, {
    position: 'top', // 双X轴
    ticks: {
      min: 0,
      max: 100
    }
  }],
  yAxes: [{
    ticks: {
      min: 0, // Y轴最小值
      max: 50 // Y轴最大值
    }
  }]
};
var chartStyles = {
  fillStyle: 'rgba(220,220,220,0.5)', // 区域图颜色
  lineColor: 'rgba(220,220,220,1)', // 曲线颜色
  pointColor: 'rgba(220,220,220,1)', // 数据点颜色
  pointSize: 5, // 数据点半径
  pointStyle: 'circle' // 数据点样式
};
var scrollbarOptions = {
  backgroundColor: '#ccc', // 滚动条背景色
  thumbColor: '#666', // 滚动条拇指颜色
  thumbImage: 'thumb.png' // 滚动条拇指图片
};

// 获取DOM元素
var chartCanvas = document.getElementById('chart');
var scrollbar = document.getElementById('scrollbar');

// 初始化图表
var chart = new Chart(chartCanvas, {
  type: 'line',
  data: {
    datasets: [{
      data: chartData,
      backgroundColor: chartStyles.fillStyle,
      borderColor: chartStyles.lineColor,
      pointBackgroundColor: chartStyles.pointColor,
      pointRadius: chartStyles.pointSize,
      pointStyle: chartStyles.pointStyle
    }]
  },
  options: chartOptions
});

// 初始化滚动条
var scrollbarPlugin = new ChartScrollbar(scrollbar, chart, scrollbarOptions);

// 添加数据更新事件
function updateChartData(newData) {
  chart.data.datasets[0].data = newData;
  chart.update();
}

其中，`Chart`是Chart.js库提供的构造函数，可以用来创建各种类型的图表。`ChartScrollbar`是一个自定义的滚动条插件，用来实现左右滚动和放大缩小功能。具体实现过程可以参考相关资料。`updateChartData`函数用来更新图表数据，可以根据需要自行修改。