[Solved]-d3: combining canvas + svg for retina-d3.js

You should use the width and height instead of the canvasWidth and canvasHeight values for the ranges:

var xSVG = d3.scaleTime()
    .range([0, width]);

var x = d3.scaleTime()
    .range([0, width]);

var x2 = d3.scaleTime()   // for zooming
    .range([0, width]);

var ySVG = d3.scaleLinear()
    .range([height, 0]);

var y = d3.scaleLinear()
    .range([height, 0]);

In the draw logic, you can add a context.scale(2, 2) to draw everything twice as big. Again, swap all canvasWidth & canvasHeight values with width & height, as the context.scale will take care of the rest

function draw() {
  context.save();
  context.scale(2, 2);
  context.clearRect(0, 0, width, height);

   // clip path
   context.beginPath()
   context.rect(0, 0, width, height);
   context.clip();

   for (i=0; i<len; i++) {
     context.beginPath();
     area(sources[i].values);
     context.fillStyle = color(sources[i].id);
     context.fill();
   }

   context.restore();
}