HTML Canvas: Рисование сетки ниже графика

Question

Я рисую график на холсте и не могу рисовать сетку графика под графиком. Мои точки данных рисуются как прямоугольники (fillRect). Когда я сначала рисую график, а затем рисую сетку, он работает так, как ожидалось, но так как сетка находится на графике, она не выглядит хорошо. Но когда я рисую сетку сначала, а затем рисую график, все решетки исчезают внизу.

Я рисую свои участки следующим образом:

var plots = document.getElementsByClassName("PlotCanvas"); 
for (var x=0; x < tokens.length; x++) 
    { 
     var canvas = plots[x]; 
     canvas.width = arrayOfArrays[x].length; 
     var context = canvas.getContext("2d"); 

     for(var point=1; point<arrayOfArrays[x].length; point++) 
     { 
      context.fillRect(point, arrayOfArrays[x][point],...); 
     } 
    } 

Затем нарисуйте сетки как: функции DrawGrids (участки) {

for(var count=0; count<plots.length; count++) 
    { 
     var ctx = plots[count].getContext("2d"); 
     ctx.beginPath(); 

     for (var x = 0.5; x < plots[count].width; x += 20) { 
      ctx.moveTo(x, 0); 
      ctx.lineTo(x, plots[count].height); 
     } 
     for (var y = 0.5; y < plots[count].height; y += 20) { 
      ctx.moveTo(0, y); 
      ctx.lineTo(plots[count].width, y); 
     } 
     ctx.strokeStyle = "#eee"; 
     ctx.stroke(); 
    } 
} 

Может кто-то предложить мне, как я могу сделать сетку под сценарий. Или как рисовать график таким образом, чтобы он не рисовал на весь холст, тем самым исчезая сетку, сделанную ранее.

спасибо.

Answer 1

Используйте ctx.globalCompositeOperation = "destination-over", чтобы нарисовать сетку за вашими сюжетами!

// draw your plots here 

// save the context 
ctx.save(); 

// set compositing to "destination-over" 
// New drawings are drawn behind the existing canvas content. 
ctx.globalCompositeOperation = "destination-over"; 

// draw your grids behind your plots! 
DrawGrids(); 

// restore the context 
ctx.restore();